nginx解决vue路由history模式刷新404问题

本文介绍如何在Nginx上部署Vue项目并使用history模式替代hash模式,解决刷新页面出现404的问题。通过配置Nginx的try_files指令,将所有未找到的路由重定向至index.html,确保SPA应用正常工作。

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

在nginx上部署vue项目(history模式);

vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式。比如如下网址:
使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:
http://localhost:8080/bank/page/count 这样的了;

不过history的这种模式需要后台配置支持。比如:
当我们进行项目的主页的时候,一切正常,可以访问,但是当我们刷新页面或者直接访问路径的时候就会返回404,那是因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404,怎么解决呢?我们现在可以把所有请求都转发到 http://localhost:8080/bank/page/index.html上就可以了。

所以我们需要使用nginx的try_files,去查找index.html.

nginx配置:

location / {
    add_header Cache-Control no-store;
    add_header Pragma no-cache;
    add_header Expires 0;
    root /home/test/;
    try_files $uri $uri/ @router;
    autoindex on;
  }

try_files $uri $uri/ @router;

$uri 这个是nginx的变量,代表用户访问的单个文件地址。
比如:http://test.com/index.html, 那么$uri就是 /index.html。
$uri/ 这个代表用户访问的文件目录。
比如:http://test.com/index.html, 那么$uri就是 /index.html。

所以try_files $uri $uri/的意思就是,比如http://test.com/example先去查找单个文件example,如果example不存在,则去查找同名的文件目录/example/,如果再不存在,将进行重定向@router

配置示例:

  location / {
    root /opt/data/nginx/html/pc/;
    index index.php index.html index.htm;
    try_files $uri $uri/ /index.html;
    error_page 404 /index.html;
  }

凡是404的路由,都会被重定向到index.html,这样就显示正确了

### Vue History Mode 下 Nginx 配置避免 404解决方案 当使用 Vue Router 的 `history` 模式时,URL 不再带有 `#` 符号,这使得 URL 更加美观和语义化。然而,在这种模式下,如果用户直接访问某个路径或者刷新页面,服务器会尝试查找对应的文件并返回 404 错误,因为这些路径实际上是由前端路由处理的。 为了避免这种情况发生,可以通过配置 Nginx 将未匹配到静态资源的请求重定向回应用入口文件(通常是 `index.html`)。以下是具体的配置方法: #### 修改 Nginx 配置 在 Nginx 中,通过设置 `location` 块来捕获所有未找到对应文件的请求,并将其转发给 `index.html` 文件。以下是一个典型的配置示例[^2]: ```nginx server { listen 80; server_name your-domain.com; root /path/to/your/vue/app/dist; # 替换为实际部署项目的根目录 index index.html; location / { try_files $uri /index.html; # 如果找不到文件,则加载 index.html } error_page 404 /404.html; # 可选:自定义错误页 location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?)$ { # 处理静态资源缓存策略 expires max; add_header Cache-Control "public, must-revalidate"; } } ``` 上述配置的关键部分在于 `try_files $uri /index.html` 这一行。它告诉 Nginx 对于任何无法映射到具体文件或目录的 URI 请求都应返回 `index.html` 页面,从而让前端框架接管后续的路由逻辑。 完成修改之后记得重启 Nginx 来使更改生效: ```bash sudo systemctl restart nginx ``` 另外需要注意的是,如果你的应用运行在一个子路径而非网站根路径上 (比如 http://example.com/myapp/) ,那么还需要调整 Vue 路由的基础路径以及相应地更新 Nginx 设置中的 `root` 和 `location` 参数[^3]。 #### 测试配置有效性 为了验证新配置是否正常工作,可以执行如下操作: 1. 构建生产环境下的 Vue 应用 (`npm run build`); 2. 把构建后的产物上传至指定的服务端位置; 3. 使用浏览器打开任意非首页链接地址进行测试——即使手动输入该网址也应该能够正确显示内容而不是遇到 404 错误。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杰哥的技术杂货铺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值