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

你可能感兴趣的:(vite3,nginx,vue,开发语言)