无法通过 npm 链接使用 Vue 组件库

Question

我正在同时构建一个 Vue 应用程序和一个 Vue 组件库。因此，我想使用 npm 链接设置库，这样我就不必继续发布我的库包并将其重新安装在我的主应用程序中。

我的包将被称为@company/vue. 我可以将其发布到 npm 并在我的 Vue 应用程序中安装/使用它，如下所示：

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

Vue.use(VueComponents);

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

但是，如果我按照标准步骤链接我的库：

1. cd 路径/到/库
2. npm 链接
3. cd 路径/到/应用程序
4. npm 链接@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：

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

这只是我见过的大多数图书馆的标准方式。再说一遍，如果我从 npm 中提取包，它就可以正常工作。

这是与我的 package.json 中的捆绑相关的内容：

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;

最后，我的组件库 babel 配置：

"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"

Answer 1

我在这个问题上找到了解决方案：

只需将其添加到项目中的 vue.config.js 中：

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