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

技术 · 01-25 · 254 人浏览

vue.jpg
最近做一个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: "/项目发布目录/", //配置项目打包后的目录
        // ...
    }
})
vue vite