Vue:如何使用Vue-cli服务为Nuxt构建bundle

Question

一个用户试图将我的包用于nuxt.js，但得到错误：document is not defined。

我发现了第一个问题。当我用CCD_ 2构建束时，正在使用CCD_ 3。然而，这会导致使用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服务要容易得多。CCD_ 15服务的唯一问题是；流动；您的回购。但是，您可以修改rollup.config.js以修改文件夹结构。

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