[图片] 最近做项目遇到一个非常头疼的问题,就是在加上 vue-route 后, 火狐浏览器 访问路由会卡住,有些浏览器会,有些不会。所以一直用 chrome/chromium 开发,但是这种浏览器兼容性问题是一定要解决的,虽然只是部分电脑,但是非常不友好。 问题 今天再次尝试,发现一旦等待时间久了,就会出现如下错误 ..

vue-router.esm.js: Error: "Loading chunk 0 failed" 完美解决方案

最近做项目遇到一个非常头疼的问题,就是在加上 vue-route 后, 火狐浏览器 访问路由会卡住,有些浏览器会,有些不会。所以一直用 chrome/chromium 开发,但是这种浏览器兼容性问题是一定要解决的,虽然只是部分电脑,但是非常不友好。

问题

今天再次尝试,发现一旦等待时间久了,就会出现如下错误

error

vue-router.esm.js:  Error: "Loading chunk 0 failed."

这个错误,前段时间找了好多资料,没能解决。今天再次去找,也是参考了很多文章:

还有很多,都没能解决

解决

最后我发现可能是路由懒加载的问题,我们路由加载方式如下:

const TheAuth = () => import('_views/the-auth')
const TheLogin = () => import('_components/the-login')
const TheRegister = () => import('_components/the-register')

export default {
  path: '/auth',
  name: 'auth',
  component: TheAuth,
  redirect: '/login',
  children: [
    {
      name: 'login',
      path: 'login',
      component: TheLogin,
      meta: {
        title: '欢迎登录'
      }
    },
    {
      name: 'register',
      path: 'register',
      component: TheRegister,
      meta: {
        title: '欢迎注册'
      }
    }
  ]
}

方式一:放弃懒加载

因为使用的 import 懒加载的方式,尝试改为直接加载是没有问题的。

import TheAuth from '_views/the-auth'
import TheLogin from '_components/the-login'
import TheRegister from '_components/the-register'

export default {
  path: '/auth',
  name: 'auth',
  component: TheAuth,
  redirect: '/login',
  children: [
    {
      name: 'login',
      path: 'login',
      component: TheLogin,
      meta: {
        title: '欢迎登录'
      }
    },
    {
      name: 'register',
      path: 'register',
      component: TheRegister,
      meta: {
        title: '欢迎注册'
      }
    }
  ]
}

方法二:继续使用懒加载

那如果我要继续使用懒加载呢?因为这个 issue ,我发现可能是由于访问不到 js 的问题,因为我查看他的网路请求并没有发出请求 js 的请求.

所以应该是静态资源的问题,对于 vue-cli2 生成的项目来说,可以尝试修改 assetsPublicPath/./,只要修改 config.index.jsbuild 即可:

assetsPublicPath: '/'

但是对于 vue-cli3 生成的项目怎么办呢?参考 vue-cli3 配置 assetsdir,修改为 / 或者 ./ 或者 .,只要修改 vue.config.js 即可:

module.exports = {
  assetsDir: '.',
  //...
}

总结

最后解决这个问题还是在 github 上面找到的,其实最主要的就是明白配置,明白了就好了 =-= 虽然不是前端的人,但是其实还是很好理解的。这个问题怪恶心的,找了很多资料,只有这样可以用。

  • Vue.js

    Vue.js(读音 /vjuː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    132 引用 • 545 回帖 • 655 关注
  • 学校
    2 引用 • 3 回帖
  • 项目
    19 引用 • 157 回帖
1 回帖   
请输入回帖内容...
  • xiaochegnzi0  

    大佬,我./ 原本就是设置的这个,改成 / 这个报错,
    加路由报错也不行,
    router.onError((error) => {alert(JSON.stringify(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);

    }

    });

    怎么办??