vue项目上线报loading chunk * failed 错误[已解决]

最新推荐文章于 2024-06-27 12:05:04 发布

北冰洋_

最新推荐文章于 2024-06-27 12:05:04 发布

阅读量7.5k

点赞数 4

本文链接：https://blog.csdn.net/weixin_48156531/article/details/121640889

版权

vue项目上线报loading chunk * failed 错误

在这里插入图片描述
我是刚写完的vue后台管理项目，上线部署到nginx上，然后本地测试没毛病，线上就是报这种错误，查了很多资料，大部分都是这种方法：

就是把将 config / index.js的build的路径assetsPublicPath改为‘/’ 可能是我自己项目的原因并不好使
最后找到了解决办法，是路由懒加载的原因

解决：

let scrollview = () => import('@/pages/innovation/scrollview');

改为

import scrollview from "../pages/innovation/scrollview";

然后下面慢慢引用就好

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

北冰洋_

关注关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue webpack 报Loading chunk....failed 错误处理

peade的博客

05-27

3109

错误现象代码已经发到服务器上部分机型，特别是iphone手机，偶发或频繁出现Loading Chunk ... failed错误原因分析前端用vue-cli，未做特殊处理，无法确定是否是前端代码问题，假定非前端问题，那么就是服务器配置的问题。总而言之，具体原因未知错误解决 router.onError((error) => { // 代码来自于其他人的解决方案，只改了一下正则 const pattern = /Loading chunk .* failed/g const

关于Vue Loading chunk {n} failed的一些思考

SunSeekerX

06-02

483

关于Vue Loading chunk {n} failed的一些思考更新时间：2020-06-02 14:52:43 0x1 问题测试偶尔会出现这个问题，遂提出一个bug，从bug字面意思来看，有一个js的块加载失败了。丢失了一个${domain}/js/chunk-${hash}.js。为什么会丢失？为什么会偶发？同类问题 Vue项目中出现Loading chunk {n} failed问题的解决方法点击切换路由的时候，有时候会报错本文大量引用了17khba在点击切换路由的时候，有

参与评论您还未登录，请先登录后发表或查看评论

Loading chunk (\d)+ failed 错误方案

sunluyi的博客

01-10

4914

已经上线的项目在正式服运行正常，过了一段时间需要该需求，放在测试上一跑一直报错，并且是4个人测试时，两台电脑没问题，运行正常，另外两个人一直出这个错误。百度了一下，网上有很多关于这个问题的修改方式。这个问题出现概率比较小但是一旦出现就会导致页面崩溃，参考了网上众多大佬的文章，最后采用vue-router的错误处理函数 onError解决问题 ...

vue项目报错Error:Loading chunk {n} failed.解决

最新发布

gumini的博客

06-27

315

检查之后，本地没啥问题呀！可能是由于重新发版，浏览器存在缓存的原因，如果用户一直停留在页面上，此刻操作访问的还是旧的静态资源，会存在功能性的差异，切换页面时偶尔就会出现该错误。上班路上产品发消息说项目报错了，某个路由页面打不开，让我尽快解决问题，报错如下图。此处省略一些字不文明的gc（xxxxxxxx）。

vue部署到线上时，Loading chunk xxx failed 问题

Lark的技术小窝

09-20

1099

此问题时常会出现在安卓各个机型，还会不定时出现这个问题，但在苹果各PC端都不会出现此问题错误出现原因：安卓中部分内置浏览器对资源文件的加载优化不够，导致资源文件懒加载失败解决方案： 1.看webpack配置是否正确 PublicPath配置为（vuecli3）：publicPath: process.env.NODE_ENV === 'production' ? './' : '/',...

vue 路由懒加载报错 Loading chunk * failed 组件加载不出来

qq_47956199的博客

02-07

1112

跳转对应的路由，无法跳转，打开控制太发现报错，查看网络发现对应的组件没有获取到，而且获取时间只有4ms就停止获取了，谷歌不会报这样的错误，但是edge会，解决方法(不一定有用)：给请求代码套个try。

解决Vue打包后放到部署到服务器运行时出现Loading chunk * failed 错误

05-09

3878

最近一直在捣鼓的Springboot+Vue 前后端分离项目，Vue 前端项目打包部署到Nginx 服务器访问时，点击导航栏切换一直报错：原因：路由懒加载的情况下，访问当前应用进行路由跳转时都是实时动态的从服务器上拉取相应模块的js文件，这时候我们改完代码打包上线，js文件名更换了，路由跳转的时候由于页面并未刷新，所以还是访问的原来的文件名，这是就会出现找不到模块的错误。路由异步加载组件报错，这个错误来源 webpack 进行 code spilt 之后某些 bundle 文件 lazy loadin

详解Vue项目中出现Loading chunk {n} failed问题的解决方法

10-18

通过这些知识点，我们可以得出结论，在Vue项目中遇到"Loading chunk {n} failed"问题时，虽然可能难以直接找到问题的根源，但通过合理的错误捕获和容错处理，可以有效减少该错误对用户的影响，并保证应用的稳定性。

遇到 Loading chunk {n} failed问题不要慌

w候人兮猗

02-09

6399

前言最近在写个vue的demo,调试过程中出现个问题,vconsole中提示 [vue-router] Failed to resolve async component default: Error:Loading chunk 10 failed. 大致意思就是路由异步加载组件的时候报错了报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。...

Vue 解决Loading chunk (\d)+ failed问题

热门推荐

Maximus_ckp的博客

01-10

1万+

import Vue from 'vue'; import Router from 'vue-router'; // 两种页面引入方式 // 方式1，将所有页面import进来，会打包成一个巨大的js,首页加载慢，后续页面加载快，不推荐 // import Page404 from '@/pages/Page404'; // import Indexfrom '@/pages/index'; ...

vue加载优化懒加载 Loading chunk xxx failed

枫林晚风起

12-23

1629

1.app.js加载时间过长，那就用懒加载优化，分割一下，用到的时候在加载一般在index.js都是这样的import home1 from '@/components/home1' {path:'/home1 ',name:'home1 ',component:home1 }, 改成这样{path:'/home1 ',name:'home1 ',component:reso...

Vue项目中出现Loading chunk {n} failed问题的解决方法

weixin_42138420的博客

11-04

2621

这种报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。当在渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。完全符合我们场景，所以在onError方法中我们实现如下代码： 1、服务端解决方式报错的原因是某些js bundle没有被找到，所以在服务端接收到获取该js文件的请求时先判断该js文件是否存在，如果存在直接返回js文件，如果不存在则返回一个提示信息给前端，让前端处理。假设服务端用express作为静态文件服务器，代码如下： app.al

VUE打包上线后报错ChunkLoadError: Loading chunk chunk-* failed.

jeesr的博客

06-04

6691

使用vue2的一个框架vue-admin-beatiful，在编译时被我打断了，越是就出现了问题，再次打包报错： EPERM: operation not permitted, lstat ...... 删了打包目录dist再次打包没有报错，可是打包出来传到服务器上有问题，部分页面打不开console会报错： Uncaught SyntaxError: Unexpected token ';' ChunkLoadError: Loading chunk chunk-******* failed. 重新

线上项目路由跳转报错 Loading chunk failed

yueye_wu的博客

08-18

5302

线上项目路由跳转报错 Loading chunk failed

vue本地跳转正常上传服务器后跳转异常提示Loading chunk xxx failed 错误

watermelon

06-29

2301

上传服务器后报错 Loading chunk xxx failed问题，而在本地没有这个问题，将config 文件夹下面的 index.js的build的路径assetsPublicPath改为‘/’，如下： build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirna

Vue开发中出现 Loading Chunk-###... Failed 的问题解决

weixin_67140738的博客

10-12

4884

当访问了项目的某个界面（其他界面未访问，也就是未加载资源）时，加载了打包后的index.html入口文件，入口文件中会有其他异步加载的对应包，而在重新打包后这些包的名称发生了改变，这时候重新发布了项目。里面有跳转对应界面所需要的文件，但是这个文件是之前版本的文件，也就是说当你跳转一个未加载资源的界面，这时候用错误的路径去加载，然后报错。例如，如果的静态资源存放在CDN上，我们需要将publicPath配置为CDN的地址。例如，如果我们的打包文件需要输出到指定的目录下，我们需要将output配置目录的路径。

vue项目打包上线后Loading chunk * failed.

qq_28084837的博客

05-31

1259

原因：如果我们项目中使用了路由或者组件懒加载，当我们网站上线后服务器上前端资源被替换，如果用户在我们上线期间正在使用我们的网站，上线后在加载没有加载过或者缓存过的组件数据时就会发生错误。使用路由的onError监听事件来获取组件加载失败的异常，然后刷新当前页面；

vue项目ie上白屏,报语法错误,chunk-vendors.js

09-08

当vue项目在IE浏览器中出现白屏的问题，并且报错为语法错误的情况，很可能是由于IE浏览器不支持某些ES6语法所致。解决这个问题的方法有以下几种： 1. 使用Babel转码： Vue CLI 或者 webpack 都支持使用 Babel 作为转码工具，可以将ES6的代码转换成ES5的语法。配置babel.config.js或.babelrc文件，添加相应的预设，然后重新构建项目。 2. 使用core-js/shim.js：在main.js中引入core-js/shim.js文件，可以提供对IE浏览器中不支持的一些新特性的支持。将以下代码添加到main.js的最顶部： ```javascript import 'core-js/shim.js'; ``` 3. 检查使用的第三方库是否支持IE浏览器：有些第三方库可能使用了一些ES6语法，而在IE浏览器中无法正常工作。检查项目中使用的所有第三方库的兼容性，并查看其官方文档，确保其支持IE浏览器。 4. 设置babel-polyfill：在webpack的入口文件中引入babel-polyfill来提供一些缺失的ES6特性支持。将以下代码添加到入口文件的最顶部： ```javascript import 'babel-polyfill'; ``` 以上是一些常用的解决方法，可以尝试一下来修复vue项目在IE浏览器中白屏和报语法错误的问题。另外，建议将vue项目的兼容性目标设置为最低支持IE11以确保在IE浏览器中正常运行。