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
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-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开始的项目）中下载回购。

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中的其他二手版本

Answer 1

在使用vue-cli构建和测试我的Vue组件时，我面临着同样的问题。幸运的是，在将它作为错误报告给GitHub上的vue-cli问题跟踪器后，我能够找到解决方案。原来common.js文件没有问题，也不是错误。

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

hack.php

希望这会有所帮助。有关更多信息，请查看以下链接：

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

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

1 个答案: