亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

新手上路,vue ssr 按需加載報錯

新手上路,vue ssr 按需加載報錯

瀟瀟雨雨 2019-08-21 17:50:13
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也不會報錯。4.報錯已經定位是()=>import()reject了webpack編譯沒有問題,不會報錯。跪求解答
查看完整描述

2 回答

?
一只甜甜圈

TA貢獻1836條經驗 獲得超5個贊

從依賴模塊導入樣式-官方說明從NPM依賴模塊導入CSS時需要注意的幾點:
在服務器端構建過程中,不應該外置化提取。
在使用CSS提取+使用CommonsChunkPlugin插件提取vendor時,如果提取的CSS位于提取的vendorchunk之中,extract-text-webpack-plugin會遇到問題。為了解決這個問題,請避免在vendorchunk中包含CSS文件??蛻舳藈ebpack配置示例如下:
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'
}),
//...
]
}
                            
查看完整回答
反對 回復 2019-08-21
?
尚方寶劍之說

TA貢獻1788條經驗 獲得超4個贊

1、找出使用了window、document等瀏覽器特有的對象的組件,這些對象只能在vue生命周期的mounted之后使用,created的時候是服務端渲染,是沒有這些對象的。2、importxxxformxxx,也是這個原因,可以使用動態import
                            
查看完整回答
反對 回復 2019-08-21
  • 2 回答
  • 0 關注
  • 640 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號