vue在history模式下打包部署问题及解决方案
更新时间：2025年03月31日 10:30:38 作者：爱学习的大雄
这篇文章主要介绍了vue在history模式下打包部署问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
引言
项目使用的模板是element-template，由于业务需要，我将路由的hash模式更改为了history模式，然后在打包部署项目时就出现了问题
个人发现是资源的访问路径有问题，在部署之后发现每次访问的js资源路径前都会自动携带上我路由的部分参数
经过查阅资料后发现该问题的发生与路由的两种模式有关
遇到的问题
问题如下：
在我执行npm run build:prod打包项目完成后，在本地打开dist目录下的index.html文件是无法打开的，我试过将publicPath修改为./，修改后依旧无效
但是项目部署到服务器上后可以正常打开，只是进入页面后在切换路由时会出现爆红然后卡死（根据f12可以看出是访问js资源和css资源路径有问题）
问题原因
大概原因就是路由的hash模式和history模式对路由方式的处理不一样，所以导致我出现了这个问题
解决问题
1.将vue.config.js中的publicPath参数修改成了/，不能是./
2.在部署项目时在nginx中增加配置如下
location / {
try_files $uri $uri/ /index.html;
}3.最后部署访问后发现项目没有问题
- 注意：
如果项目不是部署在服务器的根路径下，在路由的配置位置需要加上base: /包的位置/，同时vue.config.js中的publicPath参数也需要设置成这个
- 示例：
项目部署在服务器的vue包下,那么路由配置中需要加base: /vue/，publicPath需要设置成/vue/
总结
路由的hash模式与history模式打包时差异如下，
hash：
- publicPath配置为
./ - 打包完成后
可以直接运行dist包下的index.html且有界面显示 - 部署时直接使用宝塔部署即可，无需配置其它
history：
- publicPath配置为
/或项目在服务器根下路径 - 打包完成后
不可直接运行dist包下的index.html，必须要部署到服务器才行 - 部署时还需要自己去配置nginx，实现服务端的映射
location / {
try_files $uri $uri/ /index.html;
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3发送post请求出现400 Bad Request报错的解决办法
这篇文章主要给大家介绍了关于Vue3发送post请求出现400 Bad Request报错的解决办法,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
three.js是一个基于WebGL的JavaScript库,它允许开发者在网页上创建和显示3D图形,这篇文章主要介绍了vue2引入Three.js预览3D文件的实现方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-10-10
本篇文章主要介绍了vue.js 获取当前自定义属性值，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家详细介绍了vue实现多级侧边栏的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了Vue中对iframe实现keep alive无刷新的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了vue实现菜单权限控制的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要给大家介绍了关于Vite版本更新检查实现页面自动刷新的解决思路,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue-cli 2.*中导入公共less文件的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Electron集成React和Vue的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
图片压缩是一种比较便捷的压缩方式,本文主要介绍了vue3中实现图片压缩的示例代码,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02
最新评论