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;
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了分析总结20道Vue高频面试题示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了 Vue.js 单页面多路由区域操作的实例详解的相关资料,需要的朋友可以参考下2017-07-07
这篇文章主要介绍了Vue使用自定义指令实现拖拽行为,结合实例形式分析了Vue使用自定义指令实现拖拽行为具体步骤、原理与操作注意事项,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了Vue中关于重新渲染组件的方法及总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家详细介绍了vue实现拖动左侧导航栏变大变小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
antd配置config-overrides.js文件的操作
这篇文章主要介绍了antd配置config-overrides.js文件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
vue框架提供了前端开发组件的思想，可以通过组件来组合成一个完整的页面，都是随着组件数量原来越多，组件之间难免需要相互通信。本文将为大家介绍四种组件间的通信方式，需要的可以参考一下2022-01-01
前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,本文主要介绍了vue分片上传视频并转换为m3u8文件播放的实现示例,感兴趣的可以了解一下2023-11-11
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
这篇文章主要介绍了vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于vue踩坑之npm install报错问题解决的相关资料,需要的朋友可以参考下2022-06-06
最新评论