😖绝望！router设置history模式后打包线上404这个问题是很多前端同学在用 Vue Router（或 Rea

这个问题是很多前端同学在用 Vue Router（或 React Router）配置为 history 模式后，部署到服务器经常遇到的经典问题！🌟

🧐 问题现象

本地开发没问题，打包上线后，刷新页面或直接访问 /xxx 路由，页面报 404，静态资源（如 JS、CSS、图片）也加载失败。

🤔 原因分析

Vue Router 的 history 模式（或 React Router 的 BrowserRouter）会让前端路由变得像真正的 URL 一样（没有 #）。
但history 模式依赖服务器支持，因为：

你访问 /about，浏览器会请求服务器的 /about 路径
但服务器如果没有 /about 这个真实资源，就会 404，静态资源也找不到

🛠️ 解决方案

1. 配置服务器“兜底”返回 `index.html`

官方参考链接：router.vuejs.org/zh/guide/es…

核心原则：
无论访问什么路径，都让服务器返回 index.html，让前端路由接管。

🚩 Nginx 配置

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

解释：如果请求的资源不存在（$uri），就返回 /index.html

🚩 Apache 配置

在 .htaccess 文件添加：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

🚩 Vite/webpack-dev-server 本地配置

本地开发工具一般已自动处理，无需额外配置。

2. 静态资源路径写法要注意

避免用绝对路径 /static/xxx.png，建议用相对路径 ./static/xxx.png 或用 webpack 的 publicPath 配置。
Vite、Vue CLI、webpack 项目建议用 import 或 require 引用资源，或者 <img :src="xxx">

3. 生产环境构建时的 `base` 配置

Vue CLI 项目：vue.config.js 里 publicPath 要和部署目录一致
Vite 项目：vite.config.js 里 base 配置要正确

⚡ 总结

history 模式需要服务器支持，要配置“兜底”返回 index.html
静态资源路径要相对或用打包工具的资源管理
本地开发没问题，线上 404 多半是服务器没配好！

😖绝望！router设置history模式后打包线上404