无法在SSR上呈现Vue应用程序
我一直在遵循这个指导原则来学习如何创建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)bootstrap:文档未在新的Promise ()处定义。(匿名function).Promise.then.installedCssChunks.(anonymous函数)(webpack/ ReferenceError: 52:0)
但是，如果我将NODE_ENV=development更改为服务器捆绑包构建，这是可以的。
我把我所有的代码都推到了这里：https://github.com/hoanguyen311/vue-ssr
回答 3
Stack Overflow用户
发布于 2018-09-21 13:16:43
我使用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里。
Stack Overflow用户
发布于 2018-09-27 15:05:47
我遇到了和你完全一样的错误，在vue-router中有问题，然后我想是因为在node环境中没有文档或窗口，所以我尝试使用jsdom，它起作用了，没有像文档不再定义的错误，但我仍然无法在生产环境中看到我的页面。所以我试着找出我的路由器出了什么问题。事实证明，我不应该使用ssr.vuejs.org推荐的延迟加载，所以下面是我所做的，我的项目现在运行得很好。
Stack Overflow用户
发布于 2020-05-21 04:10:22
出现此错误是因为在您的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文件中。
https://stackoverflow.com/questions/50408760
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号