关于Vue项目路由栏去除“#”的处理方法及其刷新页面时出现404问题

最新推荐文章于 2025-06-12 10:26:27 发布
置顶 最新推荐文章于 2025-06-12 10:26:27 发布
阅读量4.5k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 日常问题 文章标签： Vue 路由 404 # 刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37319220/article/details/79742209
本文介绍如何在Vue项目中配置路由使用history模式，并解释了如何解决由此带来的404问题。通过设置mode属性为‘history’，可以使URL更加美观，但需要注意刷新页面时可能出现的问题及解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  如下图所示： 在实例化路由模块时，添加mode属性  为‘history’，这样地址栏的“#”号就会消失。

        缺点：这种模式下，跳转页面是不会出现问题的，但是当刷新页面是就会出现404，这时候就需要server端的配合，当页面为404时默认指向index.html，这点可以查看官网文档说明


vue2路由移除#号（Apache）
侞婼冇罪
02-15 5484
刚回上海，事情挺多的，忙到现在，折腾了一下vue2 vue2移除路由#号基本根据文档来就行了，在路由中设置： mode: 'history', 在开发阶段#就移除了，然后是生产阶段，官方文档也有详细的描述：点击打开链接 根据官方的我在Apache去设置发现还是有问题，以前有折腾过angular1的#：点击打开链接 首先在Apache文件夹中找到 httpd.con
vue下使用nginx刷新页面404的问题解决
10-16
主要介绍了vue下使用nginx刷新页面404的问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue3去除#后，刷新页面出现404
taowen0315的博客
12-06 507
设置history模式去除# 配置nginx，防止刷新后出现404
vue项目部署后，刷新提示404
分享各类领域技术问题
06-12 675
vue项目部署后，刷新提示404
vue去路由的#以及刷新404
moliyiran的专栏
01-30 361
首先，去#直接在路由加: export default new Router({ mode: 'history', //去掉url中的# routes: [ { path: '/', name: 'Index', component: Index }, { path: '/stars', name: '...
Vue如何去掉#方法,刷新404报错问题
PariyPeng
10-27 2528
问题 ：Vue如何去掉#方法,刷新404报错问题，采用的是IIS部署 背景 开发语言：.NETCORE 部署环境:IIS 项目结构：前后端分离即WEBAPI webapi相信大家都是前端内容展示页一个端口，api访问一人上端口，但由于用户给的只有一个域名，没有多余的入口。这就折腾到人了。 实现步骤 首先得让大家知道发布的目录，说一堆文字不如一张图 。wwwroot所放的文件为前端内容展示页，admin为后台管理前端，至于发布目录下就是webapi文件了。如下图： 前端修改部分 vue.
vue动态路由刷新页面显示404页面问题解决
fationopen的博客
06-27 3872
vue动态路由刷新页面 显示404页面 问题解决
vue项目地址栏中去除# 打包部署成vueHistory模式刷新后404如何配置nginx服务
weixin_42599091的博客
04-30 903
vue项目去除# 在router文件夹下的index.js中的router实例中添加mode属性，值设置为history export default new Router({ mode:"history",//去除哈希值的#号 routes }) 使用这种模式需要后端的配合，如果没有后端的配合在打包的时候页面会是空白或者刷新404。一般还是使用hash模式 后台nginx服务...
vue3项目部署后，刷新页面或直接进入某个路由地址时报错404
Lilia_00的博客
06-09 1948
通过正确配置服务器，将所有路由请求都指向 index.html，可以确保 Vue Router 能够处理客户端的路由逻辑，从而避免在刷新页面或直接访问某个路由地址时出现 404 错误。选择具体的配置方法取决于你的服务器环境。
Vue项目服务器部署刷新页面404问题及解决
IChen.的博客
10-23 6549
因为在vue项目开发的时候是访问自己的8080服务器,后端有进行处理，在刷新界面后找不到相对路径时，会重新渲染index.html界面，把路由的控制权交给前端，然后前端负责路由的匹配，在找到符合/jichu /123 这种格式的路由后,就会匹配成功。vue router mode 默认为hsas，这样的url中会带有#，如果改成mode:'history’就能去掉#号，也可以正常访问，但是再次刷新你页面就会出现404。因为网页上显示的是静态绝对路径，而实际上服务器上是没有改路径的，多以导致刷新汇报错误。
VUE路由跳转地址栏重复，页面刷新404问题汇总
qq_25796879的博客
01-18 950
2.服务部署后刷新404，检查nginx代理，检查vue.config.js中的publicPath是否正确。2.检索router.push()方法，push(path)调整为push(name:‘路由name’)1.本地开发刷新404，检查是否有用document.location.href做路由跳转。例如：https://xxxx.xxx.xxx/#/1234/#/1234。1.首先排查是否有初始化做拦截，比如检查用户是否有效，做了路由处理，
nginx中 vue路由去掉#后的配置问题
weixin_30587927的博客
09-26 1376
location =/ { rewrite index.html permanent; try_files $uri $uri/ /index.html; } 转载于:https://www.cnblogs.com/jackjo/p/9707034.html
Vue 在页面中手动刷新后路由前会加上/
X_Flandre的博客
07-21 1697
可以看到,setItem方法中每次存储数据都会转换成JSON格式的字符串 图片: https://uploader.shimo.im/f/AaVR4oum2g6j8Jeo.png?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2MjY4NDc3NjgsImciOiJXWXB2VDZ0aHdoeVBnS1h2IiwiaWF0Ijo
vue 解决404
攻防人生3722的博客
02-19 2289
在Tomcat 的ROOT 目录下添加： WEB-INF 文件夹，文件下新建web.xml，内容如下： <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license a...
vue初学篇---路由去掉#
人生有点bug的程序员的博客
12-09 904
路由去掉# 最近做的项目上线了，作为一个带有强迫症的人，看着路由带着#，挺不得劲的，所以就研究了一下怎么去掉这个#。 网上说的第一步都是加上这句话，mode:'history'，就去掉了#。 这个操作也确实去掉了#，但是在build之后，引入的静态文件，就全都乱套了，都是404，之后路由跳转的时候也是出现了404，找了很多的方法，也没有解决，最后一点一点的实验，才实验出来了。（下面的解决...
VUE路由去掉“#”
热门推荐
前端菜鸟
11-20 2万+
如果不想要很丑的 hash（地址栏去掉“#”），我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。const router = new VueRouter({ mode: 'history', routes: [...] })
Vue去掉路由中的#问题(index.js)
m0_52555753的博客
04-24 417
上述实我修改之后的代码，注意修改两个地方。
前端vue打的包 NGINX配置重定向index.html去掉 并且避免刷新页面出现 404 错误
最新发布
06-21
<think>我们正在处理一个关于Vue.js应用部署在Nginx服务器上的配置问题。用户希望去掉URL中的`index.html`，并且在刷新页面时避免404错误。这通常与VueRouter使用的模式有关。根据引用[2]，当Vue项目使用history路由模式时，刷新页面会导致浏览器向服务器发送一个路由路径的请求（而不是实际的静态文件路径），因此需要配置Nginx将所有请求重定向到`index.html`，然后由VueRouter处理路由。用户提到“去掉index.html重定向”，可能是指不希望URL中出现`index.html`，也就是希望使用干净的URL。这实际上是VueRouter的history模式所支持的。因此，我们需要配置Nginx，使得对于任何非静态文件的请求，都返回`index.html`。同时，我们也要确保静态资源（如JS、CSS文件）能够被正确访问。参考引用[3]中的配置，我们可以看到一个基本的Vue项目部署配置，但它并没有处理history模式的路由问题。我们需要在`location/`块中添加`try_files`指令。解决方案如下：1.确保VueRouter使用history模式。2.在Nginx配置中，设置`location/`块，使用`try_files`指令尝试匹配文件，如果找不到则重定向到`index.html`。具体配置示例：```nginxserver{listen80;server_namelocalhost;#静态资源根目录root/path/to/your/dist;indexindex.html;location/{#尝试按顺序匹配文件：先匹配URI对应的文件，再匹配URI对应的目录下的index.html，如果都不存在则重定向到/index.htmltry_files$uri$uri//index.html;}#如果需要代理API请求location/api/{proxy_passhttp://backend_server;}}```解释：-`try_files$uri$uri//index.html;`：首先尝试直接匹配请求的URI（即文件），如果没找到，尝试将URI当作目录并匹配其下的index文件（即`$uri/index.html`），如果还没找到，则返回`index.html`文件。这样，对于任何前端路由路径，Nginx都会返回`index.html`，然后由Vue应用接管路由。这样配置后，URL中不会出现`index.html`，并且刷新页面也不会出现404错误。注意事项：-确保`root`指令指向的是你构建后的Vue项目的dist目录。-如果之前有配置重写规则（如引用[1]中的`rewrite`），可能会影响此配置，需要移除或调整。-如果存在后端API，需要配置反向代理，如示例中的`location/api/`块。如果用户之前配置了重定向导致`index.html`出现在URL中，那么移除这些重定向规则（如引用[1]中的rewrite规则）并采用上述配置即可。§§相关问题§§1.VueRouter的history模式和hash模式有什么区别？2.除了Nginx，还有哪些服务器可以配置支持VueRouter的history模式？3.在配置Nginx支持history模式时，如何处理静态资源缓存问题？</think>### Vue项目Nginx配置优化 要解决Vue打包后部署在Nginx上的两个核心问题：**去掉URL中的`index.html`** 和 **避免刷新页面出现404错误**，需结合Vue Router的history模式和Nginx的`try_files`指令。以下是完整解决方案： --- ### 关键配置步骤 1. **启用Vue Router的history模式** 在`src/router/index.js`中： ```javascript const router = createRouter({ history: createWebHistory(), // 关键配置 routes: [...] }) ``` 2. **修改Nginx配置文件** ```nginx server { listen 80; server_name your-domain.com; root /path/to/vue/dist; # 指向Vue打包目录 location / { # 核心解决逻辑：优先匹配静态文件，失败则返回index.html try_files $uri $uri/ /index.html; # 可选：缓存控制 add_header Cache-Control "no-cache, max-age=0"; } # 静态资源缓存优化（可选） location ~* \.(js|css|png|jpg)$ { expires 1y; add_header Cache-Control "public"; } # 后端API代理示例 location /api/ { proxy_pass http://backend-server; } } ``` --- ### 原理解析 1. **`try_files`指令的作用** - `$uri` → 尝试匹配原始请求路径（如`/about`） - `$uri/` → 尝试匹配目录（如`/about/`） - `/index.html` → 上述失败时返回入口文件 *该逻辑将路由控制权交给Vue Router*[^2] 2. **history模式 vs hash模式** - `history模式`：URL为`domain.com/about`（需服务端配合） - `hash模式`：URL为`domain.com/#/about`（无需服务端配置） *刷新404问题仅出现在history模式*[^3] --- ### 常见问题排查 | 现象 | 解决方案 | |---------------------|----------------------------| | 刷新后空白页 | 检查`root`路径是否正确 | | 静态资源404 | 确认资源在`dist`目录存在 | | API请求被拦截 | 添加`location /api/`代理块 | | 浏览器缓存旧版本 | 添加`Cache-Control`头 | --- ### 配置前后对比 **原始URL** `http://localhost/about/index.html` ↓ **优化后URL** `http://localhost/about` > ⚠️ **注意事项** > 1. 生产环境需配置`server_name`替代`localhost` > 2. 每次更新后执行 `nginx -s reload` > 3. 若使用HTTPS，需添加SSL证书配置 通过此配置，Nginx会将所有前端路由请求定向到`index.html`，同时保持URL简洁，并解决刷新404问题[^2][^3]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值