📌😓vue项目部署后刷新页面404的原因和解决方案⚡⚡

vue项目打包部署上线后发现项目是可以正常运行，但是使用F5或者浏览器的刷新按钮直接变成404页面了，如下图所示：

为什么呢？😓😓 ==> 原因：Vue 是 SPA（单页应用），只有 index.html 一个入口。刷新 /user/list 时，服务器会去找 /user/list 这个物理路径，找不到就 404。

也就是说：hash模式在每次刷新页面时是直接更改“#”后的路径，history模式每次刷新会重新像服务器重新请求资源，但是服务器会把vue的路由地址当成文件路径访问（如: /pages/index），服务器又没有这个文件路径，且服务端没有配置相应的路由重定向，就会访问404

方案：配置 Nginx 将所有路由请求 重定向到 index.html，让 Vue Router 接管路由解析。

“Vue 项目部署后刷新 404，本质原因是 history 模式下，服务器把前端路由当成了后端接口路径去请求，但服务器上没有这个物理文件，就报了 404。
解决方案是在 Nginx 里配置 try_files $uri $uri/ /index.html，所有请求都指向 index.html，由 Vue Router 在浏览器端解析路由。
如果是 hash 模式不会有这个问题，但为了 URL 美观，我们项目选的是 history 模式加 Nginx 配置

方案一：Nginx 配置

location / {
    try_files $uri $uri/ /index.html;
}
//解释一下配置：
$uri：尝试匹配静态文件（如 .js/.css）
$uri/：尝试匹配目录
/index.html：以上都找不到时，全部指向 index.html

 然后的话完整 Nginx 配置是这样子的：

server {
    listen 80;
    server_name your-domain.com;
    root /usr/share/nginx/html;  # 这里是项目部署路径

    location / {
        try_files $uri $uri/ /index.html;   // 匹配目录
    }

方案二：如果项目部署在子目录（如 /admin/）

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

 别忘了哈同时需要修改 vue.config.js：

module.exports = {
    publicPath: '/admin/'
}

 方案三：其他环境配置

方案三：其他环境配置 // 也可以试试这个方法--强烈推荐前面两种方法
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

 然后简单的说说Vue Router hash和history 两种模式的区别

hash	/#/user/list	不会 404（# 后内容不发给服务器）	不需要
history	/user/list	会 404（服务器找不到物理路径）	必须配置

 针对 Vue SPA 项目部署后刷新 404 的问题，通过配置 Nginx try_files $uri $uri/ /index.html 实现路由重定向，解决 history 模式下的页面刷新 404 问题