Vite项目build后路由404，漏了哪个小配置？

哎哟喂，这个问题可让咱们多少人挠过头啊！

开发环境跑的好好的，一build上线就崩溃了。那种"本地跑没问题，线上全是404"的感觉...唉，说不出来的心塞。

不过别急别急，今天咱就来聊聊这个坑爹的路由问题。说真的，这东西kan似简单，实则暗藏玄机啊！

你知道吗？Vue Router有两种模式：hash模式和history模式。

hash模式那种带#号的路径，服务器压根不会管#后面的内容。所以刷新页面也没事儿。

但history模式呢？kan起来geng干净，但是...但是当你刷新页面或直接访问子路由时...

BANG！404！

为啥呢？因为服务器会把/about当作一个真实存在的文件或目录去找啊！而SPA只有一个index.html文件，所以自然找不到啦。

这才是关键所在！得让服务器把所有未知路径dou指向index.html。

server {
    listen 80;
    server_name example.com;
    location / {
        root /path/to/your/dist;
        try_files $uri $uri/ /index.html;
    }
}

"try_files"这句话超级重要！它会先尝试匹配请求URL对应的文件或目录，Ru果找不到就返回index.html。

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - 
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html 

Ru果你的项目不是部署在根目录下呢？比如example.com/subpath/这样的子目录。

那么你还需要设置base选项哦！

// vite.config.js
export default defineConfig({
  base: '/subpath/'
});
// router/index.js
const router = createRouter({
  history: createWebHistory,
  routes
});

有些静态托管服务不支持回退配置怎么办？哈哈，咱用插件搞定呗！

npm install vite-plugin-rewrite-all --save-dev
// vite.config.js
import rewriteAll from 'vite-plugin-rewrite-all';
export default defineConfig({
  plugins: 
});

因为SPA是单页应用啊！除非你Zuo了SSR或者预渲染，否则爬虫kan到的是空白页面。要解决这个问题的话...咱Ke以考虑Vue Router的预渲染功Neng或者Nuxt.js这样的SSR框架。不过这又是另一个大话题啦~今天就不展开了哈~

路由404本质是服务器没有正确处理前端路由

Zui佳解决方案是让服务器将所有请求回退到index.html

不同环境有不同的处理方式

注意base选项Ru果部署在子目录下

对于特殊托管环境Ke以考虑使用插件

怎么样？是不是觉得原来这么简单啊？！其实hen多问题dou是细节导致的...那个那个...就是我们容易忽略的一些小地方啦！

希望这些方法Neng帮到各位同学~要是还有其他疑惑的话...欢迎留言讨论喔~