javascript - vue cli 使用目标库 : "require is not defined" when component is imported 构建

Question

我正在尝试将 Vue 组件导出为包，并使用 vue cli 构建 dist。我打算在 npm 上发布它，但我目前正在使用符号链接(symbolic link)进行测试。然而，即使是一个简单的 hello-world 项目，我也无法制作有效的包。

我创建了一个项目:

vue create hello-world

然后我修改了package.json:

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name vue-hello-world ./src/components/HelloWorld.vue",
    "lint": "vue-cli-service lint"
  },
  "main": "./dist/vue-hello-world.common.js",

然后我打电话

npm run build

它编译没有错误。

然后我在另一个项目的 vue 组件中导入(我在 node_modules 中使用了符号链接(symbolic link)):

import HelloWorld from "hello-world";

在页面呈现时出现以下错误:

[Vue warn]: Failed to resolve async component: function MediaViewerPdf() {
  return Promise.all(/*! import() */[__webpack_require__.e(62), __webpack_require__.e(46)]).then(__webpack_require__.bind(null, /*! ./viewers/MediaViewerPdf.vue */ "./vuejs/components/mediaViewer/viewers/MediaViewerPdf.vue"));
}
Reason: ReferenceError: require is not defined

知道发生了什么吗？

备注:

• 使用 vue inspect，我在 webpack 配置中检查了:

目标:“网络”

• 我已经在导入项目中将 resolve.symlinks 设置为 false。

编辑:我已经确认它不是来自符号链接(symbolic link)，我直接在 node_modules 上的包有完全相同的错误。

完整代码的 repo :https://github.com/louis-sanna/vue-hello-world

Answer 1

所以我在 vue-cli repo 上问了这个问题，我得到了解决方案! https://github.com/vuejs/vue-cli/issues/4245

原来 NODE_ENV 已经在我的 shell 中设置为 development，所以它是用于构建的模式。

只需要显式设置模式就可以了:

vue-cli-service build --target lib --name vue-hello-world ./src/components/HelloWorld.vue --mode production

你可能需要将它添加到 vue.config.js 中:

config
  .mode("production")