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

Question

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

我必须做什么：

我想创建一个 Vue 组件，我可以将它放入 NPM 私有 repo 中，然后使用 bundle.js 文件之类的东西将其导入其他项目

TLDR：

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

长版：

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

• 1. 新建默认项目vue create hello-world
• 2. 默认情况下，我们这里有第一个组件 - src/component/HelloWorld，对于本示例，这是我们要导出的组件
• 3. 使用 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'; 或 require('path/to/folder/or/file') 将此组件导入另一个 vue 项目。捆绑文件似乎没有导出成员。

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

---

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

1. git clone
2. npm install
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 文件没有问题，也不是错误。

无论如何...长话短说，您尝试导入的现有项目无法解析符号链接（因为这是您使用 npm 链接时会发生的情况）。为了解决您的问题，您需要在要导入的项目的根文件夹中的 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