我一直在遵循此指南以了解有关创建SSR Vue App的信息。 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更改为服务器 bundle 包构建,则可以。
我已经将所有代码推送到这里:https://github.com/hoanguyen311/vue-ssr
最佳答案
我使用 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 中。
关于vue.js - 无法在SSR上渲染Vue应用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50408760/