vue项目上线路径跳转无效(404问题)的解决
在近期做的一个小项目中，本地路由跳转没有任何问题，使用nginx部署上线后出现很多路由无法跳转的问题。
经过一番研究，发现可以通过以下两种方式解决。
一、将路由改为hash模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会向后端发出请求。
为什么hash模式下没有问题
router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login
它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新向服务端发送请求。而改变hash，在hash模式中会被hashChange方法所捕获，在vue中会触发页面的修改。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误
具体操作：找到router文件夹下的index.js文件，将mode改为hash
二、history模式后端配置nginx
如果觉得hash模式的路由模式显示在地址栏有 “#” 不好看，想使用history模式，就需要配置nginx。
为什么history模式下有问题
Vue是属于单页应用（SPA）
而SPA是一种网络应用程序，所有与用户交互都是通过动态重写当前页面来实现页面变化的，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个index.html
现在，我们回头来看一下我们的nginx配置：
server {
listen 80;
server_name www.xxx.com;
location / {
index /data/dist/index.html;
}
}
可以根据 nginx 配置得出，当我们在地址栏输入 www.xxx.com 时，
这时会打开我们 dist 目录下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login，
关键在这里，当我们在 www.xxx.com/login 页执行刷新操作，nginx location 是没有相关/login配置的，所以就会出现 404 的情况。
因此需要重新配置nginx，将任意页面都重定向到 index.html
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue项目中,前端使用axios与后台进行数据请求或者提交的时候,如果后台没有设置跨域,浏览器做数据请求的时候就会报错,这篇文章主要给大家介绍了关于vue如何解决axios请求前端跨域问题的相关资料,需要的朋友可以参考下2021-10-10
这篇文章介绍了Vue3路由开发中鲜为人知的高级技巧,帮助开发者构建更灵活强大的路由系统,这些技巧能显著提升复杂应用的路由处理能力,优化用户体验和开发效率2025-07-07
如何在vue3中使用滑块检验vue-puzzle-verification
这篇文章主要介绍了在vue3中使用滑块检验vue-puzzle-verification的相关资料,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了Vue el-table复选框全部勾选及勾选回显功能实现,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-05-05
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章主要给大家介绍了关于Vue新手指南之创建第一个vue-cli程序的相关资料,需要的朋友可以参考下2021-05-05
本文基于Vue3、TypeScript和Setup语法糖,实现文件断点续传功能,支持网络中断或浏览器关闭后从上次上传位置继续上传,并在浏览器重新打开时通过用户确认自动续传,感兴趣的朋友跟随小编一起看看吧2025-06-06
本篇文章主要介绍了将 vue 生成的 js 上传到七牛的实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了vue实现组件之间传值功能,结合实例形式分析了vue.js父子组件之间相互传值常见操作技巧,需要的朋友可以参考下2018-07-07
vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率，这篇文章主要介绍了vue-devtools的安装,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了使用vue 国际化i18n 多实现语言切换功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-10-10
最新评论