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

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

方法一、在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: "/项目发布目录/", //配置项目打包后的目录
        // ...
    }
})