vite端口项目打包后的端口转发问题

  vue3+vite构建的项目中，因为我们使用的是vite服务器转发后端请求，所以导致我们在打包之后，无法正常请求到后端。
  所以我们要让项目区分开发环境和打包环境来请求不同的接口，所以在我们的vite.config.ts文件中做修改:

// ... existing code ...
    // 开发服务器配置
    server: {
      port: 8090,
      open: true,
      cors: true,
      proxy: {
        '/api': {
          target: env.VITE_BASE_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '/api'),
          secure: false,
          ws: true
        }
      }
    },
    // 添加生产环境基础路径配置
    base: mode === 'production' ? env.VITE_BASE_URL : '/',
// ... existing code ...

base的这个部分是我们添加的。

.env文件环境设置

VITE_BASE_API=http://localhost:8301  //后端url

之后，在我们的请求类当中修改我们的请求baseurl:

// 修改基础URL的配置方式
export const BASE_URL = import.meta.env.PROD ? import.meta.env.VITE_BASE_API + '/api' : '/api'

const instance = axios.create({
  baseURL: BASE_URL,
  timeout: 5000
});

当我们在开发环境的时候，import.meta.env.PROD 的值为false，当处于build打包之后的环境，则import.meta.env.PROD 为true，这样就顺利使得打包之后的vite跑起来了。