一、先搞懂：URL 中 # 的特殊作用

1. # 是 “片段标识符”，而非服务器请求路径

2. 哈希模式刷新不报错的完整流程

1. 
   路由跳转时：Vue Router 监听 # 后面的路径变化（如从 #/home 到 #/article/240），通过前端 JS 切换组件，不发起新的服务器请求（这也是 SPA “无刷新跳转” 的核心）。
   


2. 
   页面刷新时：
   
   
   
   • 
     服务器仅收到根路径 / 的请求，按默认静态文件规则返回 Vue 入口文件 index.html（无需额外配置）。
     
   
   
   • 
     index.html 加载后，Vue 会读取 URL 中 # 后面的路径（/article/240），通过前端路由匹配对应的组件，页面正常显示。
     
   
   
   
   

3. 哈希模式的优缺点

• 
  优点：无需配置服务器，部署简单，刷新永远不会 404。
  


• 
  缺点：URL 中带有 #，美观度不足；部分场景（如微信分享、SEO 优化）可能受影响。
  

二、历史模式：去掉 # 后，为何刷新就 404？

const router = new VueRouter({ mode: 'history', // 开启历史模式，去掉 URL 中的 # routes: [...] }) 

1. 历史模式的核心矛盾

2. 对比：两种模式的刷新请求差异

三、Nginx try_files：解决历史模式刷新 404 的关键

1. try_files 指令的核心作用

try_files $uri $uri/ /index.html; 

（1）第一个参数：$uri —— 优先匹配真实文件

• 
  请求 http://xxx.com/css/app.css，$uri 为 /css/app.css，Nginx 会去项目根目录查找该文件，存在则直接返回（保证静态资源正常加载）。
  


• 
  请求 http://xxx.com/article/240，$uri 为 /article/240，根目录下无该文件，进入下一个匹配。
  

（2）第二个参数：$uri/ —— 再匹配真实目录

• 
  请求 http://xxx.com/article/240，$uri/ 为 /article/240/，根目录下无该目录，进入最后一个兜底选项。
  

（3）第三个参数：/index.html —— 兜底返回 Vue 入口

• 
  浏览器加载 index.html 后，Vue 会启动并读取 URL 中的路径（/article/240）。
  


• 
  Vue Router 匹配对应的路由组件，页面正常显示，完美解决刷新 404 问题。
  

2. 历史模式的完整 Nginx 配置示例

server { listen 80; # 监听端口 server_name ruoyiblog.wlphp.com; # 你的域名 root /usr/share/nginx/html/ruoyiblog; #  Vue 项目打包后的 dist 目录路径 # 核心配置：解决历史模式刷新 404 location / { try_files $uri $uri/ /index.html; # 按顺序匹配，兜底返回 index.html index index.html index.htm; # 默认首页 } # 可选：配置静态资源缓存（优化性能） location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ { expires 7d; # 静态资源缓存 7 天 add_header Cache-Control "public, max-age=604800"; } } 

3. 关键注意点

• 
  根目录配置：root 必须指向 Vue 项目打包后的 dist 目录，否则 Nginx 无法找到 index.html 和静态资源。
  


• 
  子目录部署：若项目部署在子目录（如 http://xxx.com/blog/article/240），需在 Vue 路由中设置 base: '/blog/'，同时 Nginx 的 location 需改为 location /blog/，确保路径匹配正确。
  


• 
  静态资源兼容：try_files 会优先匹配真实文件（如 css、js、img），因此静态资源不会被转发，可正常加载。
  

四、总结：两种模式的选择与配置建议

1. 
   若追求简单部署，无需美观 URL：直接使用默认的哈希模式，无需配置服务器，刷新永远不会 404。
   


2. 
   若需要无 # 的美观 URL：切换为历史模式，并通过 Nginx 的 try_files 指令配置兜底转发，核心是 try_files $uri $uri/ /index.html;。