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"
  }
Vue3是一种流行的JavaScript框架,它提供了一种简洁、高效的方式来构建用户界面。TypeScript是一种静态类型检查的JavaScript超集,可以增强代码的可读性和可维护性。Vite是一个基于ES模块的构建工具,用于快速构建现代化的Web应用程序。 要将Vue3 + TypeScript + Vite项目部署Nginx服务器上,可以按照以下步骤进行操作: 1. 构建项目:在本地开发环境中,使用Vite构建工具将Vue3 + TypeScript项目打包成静态文件。在项目根目录下运行以下命令: ``` npm run build ``` 这将生成一个`dist`目录,其中包含了构建后的静态文件。 2. 配置Nginx:在Nginx服务器上创建一个新的站点配置文件,例如`myapp.conf`。可以使用以下命令在`/etc/nginx/conf.d/`目录下创建该文件: ``` sudo nano /etc/nginx/conf.d/myapp.conf ``` 在配置文件中添加以下内容: ``` server { listen 80; server_name yourdomain.com; # 替换为你的域名 root /path/to/your/project/dist; # 替换为你的项目dist目录的路径 index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 确保将`yourdomain.com`替换为你的域名,并将`/path/to/your/project/dist`替换为你的项目`dist`目录的实际路径。 3. 重启Nginx:保存并关闭配置文件后,使用以下命令重启Nginx服务器以使配置生效: ``` sudo service nginx restart ``` 现在,你的Vue3 + TypeScript + Vite项目应该已经成功部署Nginx服务器上了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值