无法使用npm link与Vue组件库

Question

我同时正在构建Vue应用程序和Vue组件库。因此，我想通过npm链接来设置库，这样我就不必一直发布我的库包并在我的主应用程序中重新安装它了。

我的软件包将被称为 @company/vue。我可以将其发布到npm并像这样在我的Vue应用程序中安装/使用它：

import Vue from 'vue';
import VueComponents from '@company/vue';

Vue.use(VueComponents);

这很好用。我可以访问我的.vue文件中的组件等。

然而，如果我按照将库链接到应用程序的标准步骤：

1. cd path/to/library
2. npm link
3. cd path/to/application
4. npm link @company/vue

在启动开发模式时，我会收到以下警告：

export 'default' (imported as 'VueComponents') was not found in '@company/vue'

当然，页面上没有任何内容加载。

我想可能是打包方式出了问题？

我的构建脚本如下：

vue-cli-service build --no-clean --target lib --name company-vue src/index.js

它所指的index.js是这样的:

import './index.scss';

import * as components from './components/index.js';

const CompanyVue = {
    install(Vue) {
        if (this.installed) {
            return;
        }

        this.installed = true;
        for (let name in components) {
            Vue.use(components[name]);
        }
    }
};

let GlobalVue = null;

if (typeof window !== 'undefined') {
    GlobalVue = window.Vue;
}
else if (typeof global !== 'undefined') {
    GlobalVue = global.Vue;
}

if (GlobalVue) {
    GlobalVue.use(Plugin);
}

export * from './components';
export default CompanyVue;

这只是我看到大多数库所采用的标准方式。而且，如果我从npm上拉取包，它也能很好地工作。

这与我的package.json文件中的打包相关:

"files": [
  "dist",
  "src",
  "!src/**/*.spec.js",
  "!src/**/*.stories.js"
],
"main": "./dist/company-vue.common.min.js",
"module": "./dist/company-vue.umd.min.js",
"browser": "./dist/company-vue.umd.min.js",
"unpkg": "./dist/company-vue.umd.min.js"

最后，我的组件库的 Babel 配置如下：

module.exports = {
    presets: ['@babel/preset-env'],
    env: {
        test: {
            presets: [[
                '@babel/preset-env',
                {
                    targets: { node: "current" }
                }
            ]]
        }
    }
}

- Troncoso

---

这方面有任何进展吗？ - Jared

Answer 1

我在这个问题中找到了一个解决方案：链接。只需在您的项目中的 vue.config.js 文件中添加以下内容：

 configureWebpack: {
    resolve: {
        symlinks:false //npm link
    },
}

- Manuel Ottlik