无法将Vue组件库与npm链接一起使用

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

还有我的索引。它指的是：

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中取出包，效果很好。

这是我包裹里与捆绑有关的东西。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" }
                }
            ]]
        }
    }
}

Answer 1

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

只需将此添加到您的vue。配置。在你的项目中：

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