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

本文主要是介绍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官方文档

这篇关于vue路由使用history模式部署线上报错ChunkLoadError: Loading chunk xxxxxx failed.的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---