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

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

问题

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

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

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

• Issue #484 · JeffreyWay/laravel-mix
• https://github.com/vuejs/vue-router/issues?utf8=%E2%9C%93&q=Loading+chunk+0+failed.+
• Issue #742 · nuxt/nuxt.js
• ....

还有很多，都没能解决

解决

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

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.js 的 build 即可：

assetsPublicPath: '/'

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

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

总结

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