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