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

曾经终败给现在 2023-10-11 14:17 19阅读 0赞

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

### 问题 ###

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

![error][]

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

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

*  [https://github.com/JeffreyWay/laravel-mix/issues/484][https_github.com_JeffreyWay_laravel-mix_issues_484]
 *  [https://github.com/vuejs/vue-router/issues?utf8=%E2%9C%93&q=Loading+chunk+0+failed.][https_github.com_vuejs_vue-router_issues_utf8_E2_9C_93_q_Loading_chunk_0_failed.]\+
 *  [https://github.com/nuxt/nuxt.js/issues/742][https_github.com_nuxt_nuxt.js_issues_742]
 *  ....

还有很多，都没能解决

### 解决 ###

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

`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 配置][vue-cli3] `assetsdir`，修改为 `/` 或者 `./` 或者 `.`，只要修改 `vue.config.js` 即可：

### 总结 ###

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

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

[error]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXNvdXJjZXMuZWNob2Nvdy5jbi9maWxlLzIwMTkvNS8xNS9USU0lRTUlOUIlQkUlRTclODklODcyMDE5MDUxNTEwMzIwOS5wbmc?x-oss-process=image/format,png
[https_github.com_JeffreyWay_laravel-mix_issues_484]: https://link.hacpai.com/forward?goto=https%3A%2F%2Fgithub.com%2FJeffreyWay%2Flaravel-mix%2Fissues%2F484
[https_github.com_vuejs_vue-router_issues_utf8_E2_9C_93_q_Loading_chunk_0_failed.]: https://link.hacpai.com/forward?goto=https%3A%2F%2Fgithub.com%2Fvuejs%2Fvue-router%2Fissues%3Futf8%3D%25E2%259C%2593%26q%3DLoading%2Bchunk%2B0%2Bfailed.
[https_github.com_nuxt_nuxt.js_issues_742]: https://link.hacpai.com/forward?goto=https%3A%2F%2Fgithub.com%2Fnuxt%2Fnuxt.js%2Fissues%2F742
[issue]: https://link.hacpai.com/forward?goto=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin%2Fissues%2F439
[vue-cli3]: https://link.hacpai.com/forward?goto=https%3A%2F%2Fcli.vuejs.org%2Fzh%2Fconfig%2F%23assetsdir