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

标签 vue.js vue-router server-side-rendering

我一直在遵循此指南以了解有关创建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/

相关文章:

npm - Vue 模块,moment-timezone - 如何正确加载 moment-timezone 以及如何使用 2012-2022 数据

json - Google Chrome 60.0.3112.90 VueJS response.data 错误

javascript - 更改 View /组件但不更改 url

webpack-4 - SSR : dynamic import in react app how to deal with html miss match when component is loading on the client

reactjs - 如何在react-router v4中使用BrowserRouter而不是HashRouter

angular - 使用 Angular 通用开发 :ssr works but build:ssr is not working 设置页面元标记

javascript - 如何合并属性 JavaScript 对象

javascript - 在 Nuxt.js 中检测服务器端渲染

javascript - 如何在 vue js html 的文本框中显示选定的计划值?

vue.js - 带有参数的 vue 路由的别名