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

Posted 2023-02-22

【中文标题】无法导入 vue-cli-service 构建的 Vue 组件

【英文标题】：can't import Vue component built by vue-cli-service

【发布时间】：2019-06-03 12:07:17

【问题描述】：

我是 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 构建，无需任何额外更改。

新建默认项目vue create hello-world

默认情况下，我们这里有第一个组件 - src/component/HelloWorld，对于本示例，这是我们要导出的组件

使用 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）。

git clone npm install npm run build-bundle-lib 或 npm run build-bundle-lib npm link 或者只是将文件复制到退出的 vue 项目中 尝试导入/显示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中的其他使用版本

【问题讨论】：

嗨，Oskar，我的问题和你很相似。这是我的lib。我的只是有时工作，这很奇怪。得到那个unknown custom element: <S2SCurrencyInput> - did you register the component correctly? 。你找到解决办法了吗？我已经尝试过这里发布的答案，但没有运气。

@JeremyWalters 抱歉，这次我离线了。在我的情况下，解决方案与导出的组件/文件名/构建组件中的名称相同。你能分享你的回购吗？

嗨，奥斯卡，我找到了解决方案。将其用作插件。所以在任何你想使用它的项目中。导入它并调用vue.use(your_repo)。我的回购github.com/payfind/shop2shop-vue-components

【参考方案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 trackerWebpack configuration: resolve.symlinks