Element: 用vue-server-renderer加载，require后报错ReferenceError: window is not defined.

Created on 11 Oct 2016 · 7Comments · Source: ElemeFE/element

ElementUI version

OS/Browers version

Vue version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

discussion

Source

Ryan-PEK

Most helpful comment

报 window is not defined 大多数是用了 style-loader 这个库
今天调了一天终于发现这个问题了把style-loader去掉就好了

yjj5855 on 19 Feb 2017

👍4

All 7 comments

支持 SSR 应该要从开始做的时候就支持，要根据环境写不同的代码，这块 @jiyinyiyong 应该比较熟悉。

furybean on 12 Oct 2016

一般前端都会用到大量的 window 的, 不好直接干掉. 现在应该说没有完美支持.
官方提到的做法有一些:

在 Webpack 打包时候做一些处理, 具体不是很明确... https://github.com/vuejs/vue-hackernews-2.0
用 phantomjs 做模拟然后再渲染 https://vuejs.org/guide/ssr.html https://github.com/chrisvfritz/prerender-spa-plugin

我估计上边两个办法都是不理想的, 还是需要源码当中对 window 对象做检测之类的.

简单说就是现在还不适合, 搞起来挺麻烦...

jiyinyiyong on 12 Oct 2016

~~好像看到过 vuex 源码里有做检测当时没在意~~

QingWei-Li on 12 Oct 2016

暂不计划支持 SSR。

furybean on 17 Oct 2016

报 window is not defined 大多数是用了 style-loader 这个库
今天调了一天终于发现这个问题了把style-loader去掉就好了

yjj5855 on 19 Feb 2017

👍4

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