Vue：如何使用 vue-cli-service 为 Nuxt 构建捆绑包？

Question

用户尝试将my package 用于nuxt.js，但收到错误：document is not defined。

我找到了第一个问题。当我使用"build-bundle": "vue-cli-service build --target lib --name index ./src/index.js" 构建捆绑包时， vue-style-loader 正在使用中。但是，这会导致使用 nuxt 项目时出错。这部分失败了：

function addStyle (obj /* StyleObjectPart */) {
  var update, remove
  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]') 

文档未定义，因为我们使用的是服务器渲染。但问题是如何构建我的包以便我可以将它与 nuxt 一起使用？

我需要：

• index.common.js
• index.umd.js
• index.umd.min.js

Answer 1

这是由于服务器端渲染造成的。如果需要指定仅在客户端导入资源，则需要使用process.client 变量。

例如，在您的.vue 文件中：

if (process.client) {
  require('external_library')
  // do something
}

以上是document is not defined的根本解决方案。

我查了一些资料，发现这个问题不是你的包造成的。其实问题出在用户nuxt项目中的cache-loader包上。 由于某种原因，缓存加载器错误地将当前环境确定为browser 而不是node，因此vue-style-loader 被混淆并改用客户端实现。

所以尝试让用户在nuxt.config.js文件中添加以下配置，以禁用服务器端的样式表缓存：

build: {
 ...
 cache: true,
 extend(config, { isServer, isDev, isClient }) {
   ...
   if (isServer) {
     for (const rules of config.module.rules.filter(({ test }) =>
       /\.((c|le|sa|sc)ss|styl.*)/.test(test.toString())
     )) {
       for (const rule of rules.oneOf || []) {
         rule.use = rule.use.filter(
           ({ loader }) => loader !== 'cache-loader'
         )
       }
     }
   }
   ...
 }
 ...
}

Answer 2

我找到了一个解决方案，但它没有使用vue-cli 服务。相反，文件由rollup 编译。我发现使用cli 服务要容易得多。 cli 服务的唯一问题是它会调整你的回购的“流量”。但是，您可以修改rollup.config.js 来修改文件夹结构。

rollup 的问题在于它不是 webpack。因此，所有使用 webpack 配置的组件都需要调整或修改 rollup.config.js 以包含附加功能