记录Vite3打包发布后刷新总是跳转到404页面问题的解决

最近做一个vue3+Vite3的小项目，开发运行正常，刷新正常，但build打包至服务器，一刷新就总是跳转到404页面，排查了很多情况，根据网上各种介绍，确认不是项目代码问题。最后尝试nginx设置，经调整设置后，可正常刷新。以下几种方式均可：

方法一、设置伪静态

location / {
  try_files $uri $uri/ /项目发布目录/index.html;
}

方法二、在location / {} 中增加一行，try_files.....

location / {
    index  index.html index.htm index.php;
    # 以下是增加的行，注意将项目发布目录替换为实际目录，
    # 如项目在根目录，则为try_files $uri $uri/ /index.html ;
    try_files $uri $uri/ /项目发布目录/index.html ;
}

方法三，用rewrite 重写

location / {
    index  index.html index.htm index.php;
    # 以下是增加的行
    try_files $uri $uri/ @router ;
}
 
location @router{
    # 注意将项目发布目录替换为实际目录，
    rewrite ^.*$ /项目发布目录/index.html last;
}

经测试，以上方式均可正常刷新，问题解决。

需要注意的是，“项目发布目录”应当与vite.config.ts文件中的base设置内容一致：

// vite.config.ts
 
export default defineConfig({
    // ...
    return{
        // ...
        base: "/项目发布目录/", //配置项目打包后的目录
        // ...
    }
})