多年开发经验建议不要用 env 来配置后端接口，一前端对一后还好，多对多就麻烦了。如果其他前端没有.env.local ，启动时可能会报错或者无法启动，如果写在.env.development 并且提交上去，那么必然会有冲突的几率。
以下是我的用法，仅供参考，前提是用 vite 。
修改 vite.config.ts 文件:
import { defineConfig } from 'vite'
import type { ConfigEnv, UserConfigExport } from 'vite'
// 添加 @inquirer/prompts 插件用于启动时做选择。
import { select } from '@inquirer/prompts'
export default async ({ command }: ConfigEnv): Promise<UserConfigExport> => {
let proxyTarget = 'test'
const servers: {
[propName: string]: string
} = {
test: 'https://测试域名',
prod: 'https://生产域名',
张三: 'http://局域网 ip:端口',
李四: 'http://局域网 ip:端口',
王五: 'http://局域网 ip:端口',
}
if (command === 'serve') {
proxyTarget = await select({
message: '请选择后端接口地址',
choices: Object.entries(servers).map(([key, value]) => ({
name: `${key} - ${value}`,
value: key,
})),
})
}
return defineConfig({
server: {
proxy: {
'/api': {
target: servers[proxyTarget],
},
},
},
})
}
这样一来，其他前端在启动项目的时候，可以自己选择指向任何后端接口。 |
