vite2.0+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

原有版本：

"dependencies": {
    "@element-plus/icons": "0.0.11",
    "echarts": "^5.3.2",
    "element-plus": "^2.1.8",
    "vue": "^3.2.16",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "axios": "^0.24.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "vite": "^2.6.4"
  }

升级后的版本：

"dependencies": {
    "echarts": "^5.3.2",
    "element-plus": "^2.2.2",
    "vue": "^3.2.25",
    "vue-router": "^4.0.15",
    "pinia": "^2.0.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "axios": "^0.24.0",
    "sass": "^1.51.0",
    "vite": "^2.9.9"
  }

__EOF__

本文作者：默存
本文链接：https://www.cnblogs.com/typ1805/p/16434861.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！