美文网首页
vue:路由懒加载Loading chunk 1 failed.

vue:路由懒加载Loading chunk 1 failed.

作者: 韩发发吖 | 来源:发表于2021-04-27 13:45 被阅读0次

路由选择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')

相关文章

网友评论

      本文标题:vue:路由懒加载Loading chunk 1 failed.

      本文链接:https://www.haomeiwen.com/subject/qaiurltx.html