vue路由使用history模式部署线上报错ChunkLoadError: Loading chunk xxxxxx failed.

使用vue的history路由模式打包上线,发现控制台报错

• 点击其他路由模块,报错模块找不到

ChunkLoadError: Loading chunk runHotelCheckin failed.
(missing: http://120.2.3.212:10082/infoManage/static/js/runHotelCheckin.dev.js?v=1704359862052)

后面查找原因是vue.config.js中的publicPath: './'的问题,把它改成publicPath: '/'然后打包就好了

• 刷新页面之后,引入的其他外部js报错,也同样是路径的问题,引入的时候改成绝对路径就好了

<script src="./static/update.js"></script> 改成 <script src="/static/update.js"></script>

nginx部署

    server {
        listen       10082;
        location / {
            root html;
            try_files $uri $uri/ /index.html;
        }
    }

node部署(参考connect-history-api-fallback)

//1.先安装依赖
npm install --save connect-history-api-fallback
//2.引入中间件
var history = require('connect-history-api-fallback');
//3.使用中间件(下面两种方式)history({})方法内部可配置参数,参考官方文档
//方式一(原生node):
var connect = require('connect');
var app = connect()
  .use(history())
  .listen(3000);
//方式二(express):
var express = require('express');
var app = express();
app.use(history());

参考vue官方文档