Vite项目中根据不同打包命令配置不同的后端接口地址，proxy解决跨域

在vite.config.ts同级目录添加两个文件

.env.development

#开发环境
VITE_APP_ENV = 'development'

VITE_APP_BASE_API = ''

.env.production

#生产配置
VITE_APP_ENV = 'production'

VITE_APP_BASE_API = 'https://www.bdjw.work'

代码中使用路径

const request = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,   //基础路径
    timeout:5000    //发请求超时时间为5s
})

编辑package.json

  "scripts": {
    "dev": "vite",
    "prod":"vite --mode production",
    "build:dev":"vite build",
    "build:prod":"vite build --mode production",
  },

编辑vite.config.ts

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    host: '127.0.0.1',
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        // 其他可选配置...
        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
      }
    }
  }
})

在vscode终端，按需执行以下命令

npm run dev
npm run prod
npm run build:dev
npm run build:prod