Question

我一直在遵循此指南，以了解如何创建SSR Vue应用程序。 https://ssr.vuejs.org/

这是我的npm脚本

"clean": "rimraf ./dist",
"start": "node .",
"build:client": "NODE_ENV=production webpack --config webpack/client.js --progress --hide-modules",
"build:server": "NODE_ENV=production webpack --config webpack/server.js --progress --hide-modules",
"build": "yarn clean; yarn build:client; yarn build:server"

如果运行“npm run build; npm run start”，则失败。

如果我在浏览器上访问localhost：8000，则出现以下错误：

ReferenceError: document is not defined
at promises.push.installedCssChunks.(anonymous function).Promise.then.installedCssChunks.(anonymous function) (webpack/bootstrap:52:0)
at new Promise (<anonymous>)
at Function.requireEnsure [as e] (webpack/bootstrap:49:0)
at component (src/router.js:10:36)
at /Users/admin.hoa.nguyen/Demos/vue-ssr/node_modules/vue-router/dist/vue-router.common.js:1778:17
at /Users/admin.hoa.nguyen/Demos/vue-ssr/node_modules/vue-router/dist/vue-router.common.js:1805:66
at Array.map (<anonymous>)
at /Users/admin.hoa.nguyen/Demos/vue-ssr/node_modules/vue-router/dist/vue-router.common.js:1805:38
at Array.map (<anonymous>)
at flatMapComponents (/Users/admin.hoa.nguyen/Demos/vue-ssr/node_modules/vue-router/dist/vue-router.common.js:1804:26)

ReferenceError：未定义文档在promises.push.installedCssChunks。（匿名函数）.Promise.then.installedCssChunks。（匿名函数）（webpack / bootstrap：52：0）在新的Promise（）

但如果我为服务器包构建更改NODE_ENV = development，那就没关系。

我在这里推送了所有代码：https://github.com/hoanguyen311/vue-ssr

Answer 1

我使用 jsDom ，它可以正常工作。未在节点环境中定义文档。这是代码：

    const { JSDOM } = require('jsdom'); // document undefined
    const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', { 'url': 'http://localhost:9528' });
    if (typeof window === 'undefined') {
      global.window = dom.window;
      global.document = window.document;
      global.navigator = window.navigator;
    }

我将它们放在 server.js 中。

Answer 2

我遇到了与您完全相同的错误，在vue-router中出了点问题，然后我认为是因为节点环境中没有文档或窗口，所以我尝试使用jsdom，并且工作正常，没有类似的错误文档不再定义，但在生产环境中我仍然看不到我的页面。所以我试图找出路由器出了什么问题。原来，我不应该使用ssr.vuejs.org建议的延迟加载，因此这就是我所做的，并且我的项目现在运行良好。

Answer 3

出现此错误的原因是，在Webpack生产版本中，您使用了ExtractTextPlugin

{
  test: /\.scss$/,
  use: isProd
  ? [ExtractTextPlugin.loader, 'css-loader', 'sass-loader']
  : ['vue-style-loader', 'css-loader', 'sass-loader']
},

然后您在Foo.vue文件中使用模板样式。

// Foo.vue
<style lang="scss" scoped>
  h1 {
    color: #FFF;
    background: brown;
  }
</style>

我也遇到了同样的问题，我花了几天的时间使其在我们的webpack设置中起作用。但我失败了成功：p。现在，我们已将所有模板样式移至.css / .scss文件中。

无法在SSR

3 个答案: