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

Question

我对 Vue 还很陌生，也许我的问题很微不足道。

我必须做的事：

我想创建一个 Vue 组件，我可以将其放入 NPM 私有存储库中，并使用诸如 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 下载存储库（项目使用 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)
}

希望这有帮助。欲了解更多信息，请查看这些链接：

我在 vue-cli 跟踪器中的问题报告
Webpack 配置：resolve.symlinks