jeecg boot打包APP

最新推荐文章于 2025-04-18 12:40:44 发布

一只野生的酸酸

最新推荐文章于 2025-04-18 12:40:44 发布

阅读量1.3k

点赞数 1

文章标签： android javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45455227/article/details/114317131

版权

本文介绍了解决Vue项目中使用Router出现的ChunkLoadError问题的方法，通过调整Router配置及模式来提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

博主用的是jeecg 2.4.2版本的哦~

1.vue.config.js app是不需要跨域处理的，直接设置为根据经

在这里插入图片描述

2.这个时候打包呢会遇到 Uncaught (in promise) ChunkLoadError: Loading chunk chunk 这样的错误，打开配置router的index.js

在这里插入图片描述
当再渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误，当捕获到Loading chunk {n} failed的错误时我们重新渲染目标页面，这种实现明显更简单和友好，我们需要给router的onError时间注册一个回调。重要的是！！！！一定要把mode改成hash模式

import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap } from '@/config/router.config'

Vue.use(Router)

const $router = new Router({
    mode: 'hash',
    base: process.env.BASE_URL,
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
  })

$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);
    }
})

export default $router