vite中根据环境变量配置代理地址
安装需要装的包
当前使用的的是 cross-env 来跨平台设置环境变量
# 安装cross-env
npm i cross-env -D
安装 dotenv 来加载环境变量文件。dotenv 是一个零依赖的模块,它能将环境变量中的变量从 .env 文件加载到 process.env 中
npm i dotenv -D
创建环境变量文件
暂时我添加 dev 环境与 test 环境
touch .env.dev .env.test
- 修改 .env.dev 文件(代理地址可以修改为自己的,我这随便写的地址)
VITE_APP_PROXY_URL = https://www.baidu.com
VITE_APP_PROXY_DEVLOPER_URL = https://www.goole.com
VITE_APP_PORT = 3001
- 同样修改 .env.test 文件
。。。。。
配置vite.config.ts
// ... 其他配置
import type { UserConfig } from 'vite'
import dotenv from 'dotenv'
}
try {
// 根据环境变量加载环境变量文件
const file = dotenv.parse(fs.readFileSync(`.env.${process.env.NODE_ENV}`))
// 根据获取的key给对应的环境变量赋值
for (const key in (file as object)) {
process.env[key] = file[key]
}
} catch (e) {
console.error(e)
}
// 配置代理
const confg: UserConfig = {
// ...其他配置
server: {
// 默认是 3000 端口
port: Number(process.env.VITE_APP_PORT) || 3000,
// 不默认打开浏览器
open: false,
proxy: {
'^/.*-api': {
target: process.env.VITE_APP_PROXY_URL,
changeOrigin: true
},
'/developer-service': {
target: process.env.VITE_APP_PROXY_DEVLOPER_URL,
secure: false,
changeOrigin: true,
},
}
}
}
配置npm脚本
- 修改 package.json 文件
// 增加脚本 (注意 package.json 文件中不能有注释。。。)
// ...其他配置
"scripts": {
// 通过 cross-env 创建一个环境变量 NODE_ENV = dev
"dev": "cross-env NODE_ENV=dev vite",
"test": "cross-env NODE_ENV=test vite",
// 如果还有其他环境,也可以在下面继续添加
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview"
},
// ...
执行
执行脚本即可
# 这个时候就会执行 cross-env NODE_ENV=test vite
npm run test
这个时候可以看到执行结果了 端口为 3002,代理环境已经配置好了
当然你也可以配置环境变量干其他事情,比如说根据环境不同配置不同上传配置之类的。。。。。