Question

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

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

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

Vue.use(VueComponents);

那很好。我可以访问.vue文件中的所有组件。

但是，如果我按照标准步骤链接到我的图书馆，则：

cd路径/到/库
npm链接
cd路径/至/应用程序
npm链接@ company / vue

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

在“ @ company / vue”中找不到导出“默认”（导入为“ VueComponents”）

当然，页面中没有任何内容。

我必须想象我可能把它捆绑了吗？

我的构建脚本如下：

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

Answer 1

我在this issue中找到了解决方案：

只需将其添加到项目中的vue.config.js中即可。

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

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

1 个答案: