时间戳

首页 > 解决方案 > 无法在 SSR 上渲染 Vue 应用

vue.js - 无法在 SSR 上渲染 Vue 应用

问题描述

我一直在遵循这个指南来了解如何创建 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: document is not defined at promises.push.installedCssChunks.(anonymous function).Promise.then.installedCssChunks.(anonymous function) (webpack/bootstrap:52:0) at new Promise ()

但是，如果我将 NODE_ENV=development 更改为服务器包构建，就可以了。

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

标签： vue.jsvue-routerserver-side-rendering

解决方案

我使用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中。

推荐阅读