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