vue ssr 按需加载报错，以前没有遇到过！！！

Question

router.jsimportVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router);exportdefaultfunctioncreateRouter(){returnnewRouter({mode:'history',routes:[{path:'/',redirect:{name:'articleList'},name:'index'},{path:'/article',name:'article',component:()=>import(/*webpackChunkName:"article"*/'./article/index.vue'),children:[{path:'list.html',name:'articleList',component:()=>import(/*webpackChunkName:"articleList"*/'./article/articleList.vue')},{path:'articleDetails.html',name:'articleDetails',component:()=>import(/*webpackChunkName:"articleDetails"*/'./article/articleDetails.vue')}]},{path:'/crawler.html',name:'crawler',component:()=>import(/*webpackChunkName:"crawler"*/'./crawler/index.vue')},{path:'/register.html',name:'register',component:()=>import(/*webpackChunkName:"register"*/'./user/register.vue')},{path:'/messageBoard.html',name:'messageBoard',component:()=>import(/*webpackChunkName:"messageBoard"*/'./messageBoard/index.vue')},{path:'/profile.html',name:'profile',component:()=>import(/*webpackChunkName:"profile"*/'./profile/index.vue')}]})}webpack.base.jsconst{VueLoaderPlugin}=require('vue-loader');constMiniCssExtractPlugin=require('mini-css-extract-plugin')constisPro=require('process').env.NODE_ENV==='production';module.exports={mode:'development',module:{rules:[{test:/\.vue$/,loader:'vue-loader',options:{extractCSS:isPro}},{test:/\.js$/,loader:'babel-loader',exclude:/node_modules/},{test:/\.less$/,use:[isPro?MiniCssExtractPlugin.loader:'vue-style-loader','css-loader','less-loader']},{test:/\.css$/,use:[isPro?MiniCssExtractPlugin.loader:'vue-style-loader','css-loader']},{test:/\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,loader:'file-loader'}]},plugins:[newMiniCssExtractPlugin({filename:'[name].[hash].css'}),newVueLoaderPlugin()],resolve:{alias:{'vue$':'vue/dist/vue.js'}}}ReferenceError:documentisnotdefinedatr.(anonymousfunction).r.(anonymousfunction).(anonymousfunction).i.push.r.(anonymousfunction).Promise.then.r.(anonymousfunction)(webpack/bootstrap:52:0)atnewPromise()atFunction.module.exports.o.e[ase](webpack/bootstrap:49:0)atcomponent(src/router.js:24:65)atD:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1776:17atD:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1803:66atArray.map()atD:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1803:38atArray.map()atflatMapComponents(D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1802:26)atD:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1738:5atiterator(D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1945:7)atstep(D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1719:9)atstep(D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1723:9)atrunQueue(D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1727:3)atAbstractHistory.confirmTransition(D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1974:3)atAbstractHistory.transitionTo(D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:1876:8)atAbstractHistory.push(D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:2379:10)atVueRouter.push(D:\myCode\vuessr2\node_modules\vue-router\dist\vue-router.common.js:2536:16)atbundle.server.js:1:22479atnewPromise()att.default(entry/server.js:8:9)1.报错文件是打包后的vue-ssr-server-bundle.json。即vuessr的服务器端文件。2.如果router处的组件不采用按需加载不会出现错误3.如果webpack不使用mini-css-extract-plugin单独提取css也不会报错。

Answer 1

从依赖模块导入样式-官方说明从NPM依赖模块导入CSS时需要注意的几点：
在服务器端构建过程中，不应该外置化提取。
在使用CSS提取+使用CommonsChunkPlugin插件提取vendor时，如果提取的CSS位于提取的vendorchunk之中，extract-text-webpack-plugin会遇到问题。为了解决这个问题，请避免在vendorchunk中包含CSS文件。客户端webpack配置示例如下：
module.exports={
//...
plugins:[
//将依赖模块提取到vendorchunk以获得更好的缓存，是很常见的做法。
newwebpack.optimize.CommonsChunkPlugin({
name:'vendor',
minChunks:function(module){
//一个模块被提取到vendorchunk时……
return(
//如果它在node_modules中
/node_modules/.test(module.context)&&
//如果request是一个CSS文件，则无需外置化提取
!/\.css$/.test(module.request)
)
}
}),
//提取webpack运行时和manifest
newwebpack.optimize.CommonsChunkPlugin({
name:'manifest'
}),
//...
]
}
                            

Answer 2

1、找出使用了window、document等浏览器特有的对象的组件，这些对象只能在vue生命周期的mounted之后使用，created的时候是服务端渲染，是没有这些对象的。2、importxxxformxxx，也是这个原因，可以使用动态import