vite根据环境变量配置代理

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

1. 修改 .env.dev 文件(代理地址可以修改为自己的，我这随便写的地址)

VITE_APP_PROXY_URL = https://www.baidu.com
VITE_APP_PROXY_DEVLOPER_URL = https://www.goole.com
VITE_APP_PORT = 3001

2. 同样修改 .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脚本

1. 修改 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，代理环境已经配置好了

当然你也可以配置环境变量干其他事情，比如说根据环境不同配置不同上传配置之类的。。。。。