vue.js - 无法导入由 vue-cli-service 构建的 Vue 组件

Question

我是 Vue 的新手，也许我的问题微不足道。

我必须做的:

我想创建一个 Vue 组件，我可以把它放在一个 NPM 私有(private)仓库中，然后用 bundle.js 文件之类的东西将它导入到其他项目中

TLDR:

无法通过vue-cli-service build --target lib/wc导入vue组件构建。导入组件我有 sth silimar to "export 'HelloWorld' was not found in '../node_modules/hello-world'

长版:

我已经尽可能多地提出问题和项目。所有项目均由 vue-cli 构建，无需任何额外更改。

• 1. 创建新的默认项目vue create hello-world
• 1. 默认情况下，我们在这里有第一个组件 - src/component/HelloWorld，对于这个例子，这是我们要导出的组件
• 1. 尝试使用 vue-cli-service 制作可导出文件。

• 3a。 vue-cli-service build --target lib --name vue-test ./src/components/index.js 其中index.js是

  import Vue from 'vue';
  import HelloWorld from './HelloWorld.vue';
  
  const Components = {
      HelloWorld,
  };
  
  Object.keys(Components).forEach((name) => {
      Vue.component(name, Components[name]);
  });
  
  export default Components;
  

• 3b。或者直接vue文件 vue-cli-service build --target wc --name vue-test 'src/components/HelloWorld.vue'

在这两种情况下，vue-cli-service 都会在 /dist 文件夹中生成我的文件，我想相信这个文件是正确的

在这两种情况下，我都无法使用 import {HelloWorld} from 'path/to/folder/or/file'; 将此组件导入另一个 vue 项目 或require('path/to/folder/or/file').似乎捆绑文件没有导出成员。

我做错了什么？应该使用 build --target wc 还是 build --target lib？

---

如果您不想创建新应用来重现此问题，您可以从 https://github.com/okosowski/vueTest 下载 repo (项目开始使用vue cli)。

1. git 克隆
2. npm 安装
3. npm run build-bundle-lib 或 npm run build-bundle-lib
4. npm link 或简单地将文件复制到退出的 vue 项目
5. 尝试导入/显示HelloWorld

如有任何帮助，我将不胜感激!!! 谢谢

---

节点 v10.14.2

npm 6.4.1

vue-Cli 2.9.6(3.3.0 相同)

在https://github.com/okosowski/vueTest/blob/master/package.json中使用的其他版本

Answer 1

我在使用 vue-cli 构建和测试我的 Vue 组件时遇到了同样的问题。幸运的是，在将其作为错误报告给 GitHub 上的 vue-cli 问题跟踪器后，我能够找到解决方案。结果证明 common.js 文件没有任何问题，也不是错误。

无论如何...长话短说，您尝试导入的现有项目无法解析符号链接(symbolic link)(因为当您使用 npm link 时会发生这种情况)。为了解决您的问题，您需要将以下内容添加到您要导入的项目的根文件夹中的 vue.config.js 中:

// vue.config.js
module.exports = {
    chainWebpack: config => config.resolve.set('symlinks', false)
}

希望这对您有所帮助。有关详细信息，请查看以下链接:

My issue report in the vue-cli tracker
Webpack configuration: resolve.symlinks