如果要进行服务器端渲染,则很有可能全局窗口对象将是未定义的,因为这只是客户端会理解的内容。
注意:
最初,当您启动项目时,它将渲染出DOM的完整字符串(此时,window由于它是服务器端,因此将不知道,但随后将其与客户端代码一起重新渲染窗口对象将可用!
在这种情况下,我有一种解决方法。这是我的webpack插件的功能:
new webpack.DefinePlugin({ 'process.env.NODE_ENV': isDevelopment ? '"development"' : '"production"', 'process.env.BROWSER': JSON.stringify(true), __DEV__: isDevelopment}),所以我利用
process.env.BROWSER我的优势,因为它将被定义为
undefined服务器端,而
true客户端将被渲染。
由于在服务器端没有窗口对象时一切都停止工作,因此我们可以添加以下内容:
const mySpecialWindowFunction = () => { if (!process.env.BROWSER) { global.window = {}; // Temporarily define window for server-side } return /msie [6-9]b/.test(window.navigator.userAgent.toLowerCase());};这样,您的控制台就不会对您大喊大叫,也不会停止服务器端渲染,您现在可以继续光荣的一天!尽管我不得不承认这有点 hacky
,但是它可以完成工作,因为我们要做的就是让服务器端渲染出初始DOM字符串,然后让客户端接管。
另请注意: 不必担心将window设置为空对象,一旦客户端完成渲染,它将恢复正常。



