Vite项目中根据差别打包命令配置差别的后端接口地点，proxy办理跨域 ...

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

1. #开发环境
2. VITE_APP_ENV = 'development'
4. VITE_APP_BASE_API = ''

复制代码

.env.production

1. #生产配置
2. VITE_APP_ENV = 'production'
4. VITE_APP_BASE_API = 'https://www.bdjw.work'

复制代码

代码中使用路径

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

复制代码

编辑package.json

1.   "scripts": {
2.     "dev": "vite",
3.     "prod":"vite --mode production",
4.     "build:dev":"vite build",
5.     "build:prod":"vite build --mode production",
6.   },

复制代码

编辑vite.config.ts

1. export default defineConfig({
2.   resolve: {
3.     alias: {
4.       '@': fileURLToPath(new URL('./src', import.meta.url))
5.     }
6.   },
7.   server: {
8.     host: '127.0.0.1',
9.     port: 3000,
10.     proxy: {
11.       '/api': {
12.         target: 'http://127.0.0.1:8080',
13.         changeOrigin: true,
14.         // 其他可选配置...
15.         rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
16.       }
17.     }
18.   }
19. })

复制代码

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

1. npm run dev
2. npm run prod
3. npm run build:dev
4. npm run build:prod

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。