• 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.93.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"
      }
    
  • 相关阅读:
    让脚本在后台运行的方式
    inotify+rsync文件实时同步报错:usr/local/bin/inotifywait: error while loading shared libraries: libinotifytools.so.0:
    简单使用zabbix监控nginx是否存活
    zabbix4.0添加磁盘io监控
    文本处理三剑客之awk(No.1)
    对比各节点host 与 标准节点host差异脚本
    hdfs standby namenode checkpoint 的一些参数
    hdfs dfsadmin 命令详解
    hive grouping sets 实现原理
    dbcp 连接池参数说明
  • 原文地址:https://www.cnblogs.com/typ1805/p/16434861.html
Copyright © 2020-2023  润新知