hash路由转history路由报错Failed to resolve async component default: ChunkLoadError: Loading chunk 28 failed

问题

将 hash 模式路由改为 history 模式后，路由不能跳转，并报错

原因

https://cloud.tencent.com/developer/article/1653841

解决

修改webpack配置：
在 vue.config.js 文件中对基本路径 publicPath 进行修改
之前 publicPath 为 ./ ，现在改为 /

/**** 路由配置 ****/
export default new Router({
  scrollBehavior: () => ({
    y: 0
  }),
  // mode: 'hash', // 之前
  mode: 'history', // 现在
  routes: [ ... ]
})

/**** vue.config.js ****/
module.exports = {
  // 基本路径
  // publicPath: './',
  publicPath: '/', // 【主要代码】
  // 输出文件目录
  outputDir: 'superviseAppWeb',
  ...
}

【新问题】刷新后页面404

history模式下刷新页面会出现404的情况

【原因】

【解决】

history 模式下刷新出现 404解决

1. 根据前端发送的请求以及后端已有的资源路径做判断（正则）匹配，区分哪些是前端路由哪些是后端路由。
2. nginx 中间代理区分前后端路由
3. node.js提供的中间件Connect

npm instal connect-history-api-fallback

// common.js 规范
    
// 引入 express
const express = require('express')

const history = require('connect-history-api-fallback');

// 新建实例
const app = express()

app.use(history());
 
// 利用中间件 给服务器指定静态资源（打包后的项目文件）
app.use(express.static(__dirname+'/static'))

// 配置后端路由
app.get('/person',(request,response)=>{
	// 给浏览器返回的信息
    response.send({
        name:'tom',age:19
    })
})
// 开启监听
app.listen(5005,(err)=>{
if(!err) conslole.log('服务器启动成功！')
})

404问题解决来源
https://blog.csdn.net/qq_37974755/article/details/125724686
https://blog.csdn.net/weixin_53312997/article/details/127490958
Nginx配置修改 https://www.cnblogs.com/zhangzhijian/p/16896484.html