vite2.9 + vue3.2 打包部署到nginx上刷新页面404问题

vite2.9 + vue3.2 打包部署到nginx上刷新页面404问题

在本地运行没问题，部署到服务器上，能正常访问，但是刷新之后页面404

原有的Nginx配置为：

 server {
        listen      80;
        root /app/tansci/dist;
        index index.html;

        location ~* ^/(tansci) {
            proxy_pass http://127.0.0.1:8080;
            proxy_connect_timeout 30s;
            proxy_send_timeout 40s;
            proxy_read_timeout 40s;
            proxy_set_header X-Real-Ip $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location /tansci {
            proxy_pass http://127.0.0.1:8080;
            proxy_read_timeout 30;
        }
   }

修改后的Nginx配置为：

server {
        listen      80;
        root /app/tansci/dist;
        index index.html;
        try_files $uri $uri/ /index.html;      # 添加

        location ~* ^/(tansci) {
            proxy_pass http://127.0.0.1:8080;
            proxy_connect_timeout 30s;
            proxy_send_timeout 40s;
            proxy_read_timeout 40s;
            proxy_set_header X-Real-Ip $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location /tansci {
            proxy_pass http://127.0.0.1:8080;
            proxy_read_timeout 30;
        }
   }

只需要添加 try_files $uri $uri/ /index.html; 即可。

vite.config.js 配置文件

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },

    // 全局样式
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@use "@/styles/element/index.scss" as *;`,
            },
        }
    },

    // 反向代理
    server: {
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
        disableHostCheck: true,
        port: 3000,
        proxy: {
            '/tansci': {
                target: url,
                changeOrigin: true,
                pathRewrite: {
                    '^/tansci': '/tansci'
                }
            }
        }
    }
})

问题原因

vite 版本导致，项目版本做了一次升级，原有 vite 是 2.6.4，vue 是 3.2.16，后来升级为 2.9.9、3.2.25