Question

我有一个使用Vue CLI v3创建的相当复杂的SPA Vue.js应用程序。我想对这个应用程序进行改造以从SSR中受益（尽管我可能最终只会使用预先呈现...）

我的应用程序也使用通过CLI v3创建的自定义Vuejs库。这些库嵌入了CSS，我想继续这样做。

我可能已经读过世界上在Vue cli，vue-loader，vue-style-loader，vue.config.js，提取CSS等方面产生的所有内容，但是我一直失败。

这是我加载给定路由时正在运行的应用的错误消息：

ReferenceError: document is not defined
    at addStyle (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:699:22)
    at addStylesToDom (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:683:20)
    at addStylesClient (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:637:3)
    at Object.3351 (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:500:14)
    at __webpack_require__ (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:21:30)
    at Object.d12e (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:3590:380)
    at __webpack_require__ (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:21:30)
    at Module.fae3 (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:3859:51)
    at __webpack_require__ (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:21:30)
    at /Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:85:18
    at Object. (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:88:10)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)

单击错误的第一行时，我从lib的commonjs文件中获取以下代码：

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

我不知道是否需要更改我的lib（我认为是这样）或我的应用程序，或两者都更改。

这是我的图书馆的vue.config.js：

module.exports = {
  css: {
    extract: false
  }
}

但是我也尝试了extract: true和（很多）更复杂的东西。...我总是遇到相同的错误。

有没有办法将Vue cli 3 lib与CSS集成到SSR Vue应用程序中？？？非常感谢。

Answer 1

您遇到此错误是因为在不存在文档的服务器端完成应用程序构建过程时。您可以通过使用document查找元素来将元素附加到querySelector样式中：

  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')

仅当浏览器解释JavaScript附加到页面时（无节点js）。

在这种情况下，您有两种选择：

在服务器端管理样式（不能使用`document）
在客户端上管理样式（可以使用文档）

在选项1-服务器端，您可能会退出使用vue-custom-lib程序包，或者创建一个fork来检查环境是浏览器还是节点js。例如：

if(process) { you are in node js }
if(window) { you are in the browser - you can use the document.querySelector }

在选项2中，建议您选中Nuxt。

您可以在document的{{1}}属性的head.script中添加一个包

nuxt.config.js

您还应该阅读有关在Nuxt上下文中检测服务器和客户端的信息

https://nuxtjs.org/api/context/

配置构建也具有属性export default { head: { script: [ { src: '...' } ] },：

https://nuxtjs.org/api/configuration-build

也可以通过isServer函数添加自定义库

https://nuxtjs.org/api/nuxt-render-and-get-window

SSR构建对使用Vue cli3库的Vuejs cli3 SPA应用程序说“未定义文档”

1 个答案: