CentOs7中使用Nginx部署Vue单页应用刷新后404问题

劉亞坤

2021 年 10 月 29 日

249 次浏览

暂无评论

1694字数

踩坑记录

原因：路由模式是**history**模式
解决方案：
Nginx配置添加以下代码

location / {
        index  index.html;
        try_files $uri $uri/ /index.html;
      }

参考摘录自：[面试官：vue项目如何部署？有遇到布署服务器后刷新404问题吗？][1]

为什么history模式下有问题
Vue是属于单页应用（single-page application）

而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

关键在这里，当我们在 website.com/login 页执行刷新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况

为什么hash模式下没有问题
router hash 模式我们都知道是用符号#表示的，如  website.com/#/login, hash 的值为 #/login

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误

解决方案
看到这里我相信大部分同学都能想到怎么解决问题了，

产生问题的本质是因为我们的路由是通过JS来执行视图切换的，

当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404

所以我们只需要配置将任意页面都重定向到 index.html，把路由交由前端处理

对nginx配置文件.conf修改

server {
      listen  80;
      server_name  www.xxx.com;
    
      location / {
        index  /data/dist/index.html;
        try_files $uri $uri/ /index.html;
      }
    }

修改完配置文件后记得配置的更新

nginx -s reload

这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件

为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面

const router = new VueRouter({
      mode: 'history',
      routes: [
        { path: '*', component: NotFoundComponent }
      ]
    })

[1]: https://cloud.tencent.com/developer/article/1794314

最后修改：2021 年 12 月 07 日

如果觉得我的文章对你有用，请随意赞赏

CentOs7中使用Nginx部署Vue单页应用刷新后404问题

劉亞坤 • 2021 年 10 月 29 日

CentOs7中使用Nginx部署Vue单页应用刷新后404问题

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

typora解包白嫖教程

2022(3)新年计划

SeeSharper.Blog进度一览

欢迎使用 Typecho

一个新的ContOS服务器折腾过程

CentOS7安装Git2.x版本

NAS之搭建frp内网穿透服务过程记录

.NET通过CMD执行命令并获取输出【音乐小工具其一】

rsync 用法教程

WinForm经典问题：线程间操作无效: 从不是创建控件的线程访问它（包括富文本组件使用）

CentOs7中使用Nginx部署Vue单页应用刷新后404问题

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

CentOs7中使用Nginx部署Vue单页应用刷新后404问题

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款