4

我正在同时构建一个 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：

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

1 回答 1

4

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

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

 configureWebpack: {
    resolve: {
        symlinks:false //npm link
    },
}
于 2019-09-30T22:22:09.937 回答