路由选择mode: 'history',在二级导航切换报错提示如下:
vue-router.esm.js?8c4f:2314 ChunkLoadError: Loading chunk 1 failed.
(missing: http://localhost:8084/ms/js/1.js)
at Function.requireEnsure [as e] (http://localhost:8084/js/app.js:896:26)
at Function.fn.e (http://localhost:8084/js/app.js:177:40)
at component (webpack-internal:///./src/router/index.js:87:34)
at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2145:17)
at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2172:66)
at Array.map (<anonymous>)
at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2172:38)
at Array.map (<anonymous>)
at flatMapComponents (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2171:26)
at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2107:5)
解决方案
网友给出了很多,但是亲测有效果的并不是很多
1、更改vue.config.js配置 注:未见成效
# 将公共路径由相对路径改成绝对路径
publicPath: process.env.NODE_ENV === 'production'? './' : './',
#更改为
publicPath: '/'
2、在当前文件中加入vue-routerrouter的错误处理函数onError来捕获错误 注:未见成效
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g;
const isChunkLoadFailed = error.message.match(pattern);
const targetPath = router.history.pending.fullPath;
if (isChunkLoadFailed) {
router.replace(targetPath);
}
})
3、将路由页面的懒加载改成 注:生效
#将路由懒加载改成直接加载
component: () => import('@/component/home.vue')
#改成
import home from '@/component/home.vue';
component: home,
4、webpack中import动态设置webpackChunkName方法 注:生效
#component: () => import(/* webpackChunkName: "[request]" */ '../views/Home.vue')