小程序框架 unibest 环境变量配置

Sep 13, 202430 min read

Vite 和 Uni 环境变量的配置目录在根目录下的 env目录下

开启命令后会在控制台显示相关的环境变量信息

1. 配置 Vite 环境变量

Vite 的环境变量需要通过 .env 文件来管理，这些文件可以根据不同的环境（开发、测试、生产等）进行配置。

步骤：

创建 .env 文件：
创建多个 .env 文件，以应对不同的环境需求。例如：

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.development    # 只在开发模式下加载
.env.production     # 只在生产模式下加载
.env.test           # 只在测试模式下加载
.env.[mode].local   # 特定模式加载，并且会被 git 忽略

定义环境变量：
在 .env 文件中，定义你需要的环境变量。需要注意，只有以 VITE_ 开头的变量才会暴露给客户端。例如：
```
VITE_SOME_KEY=123
DB_PASSWORD=foobar  # 这个变量不会暴露给客户端
```
这样，VITE_SOME_KEY 可以在客户端代码中使用，而 DB_PASSWORD 不会暴露给客户端。
- 在客户端的 JavaScript 代码中，可以通过 import.meta.env 来访问这些变量：
```
console.log(import.meta.env.VITE_SOME_KEY) // 输出 "123"
console.log(import.meta.env.DB_PASSWORD) // 输出 undefined
```

2. 使用 `mode` 配置不同模式的环境变量

在 npm 脚本中指定模式：
使用 --mode 参数来指定不同的模式，从而加载相应的 .env.[mode] 文件。比如：
```
"scripts": {
    "dev": "uni",
    "dev-dev": "uni --mode development",
    "dev-test": "uni --mode test",
    "dev-prod": "uni --mode production"
}
```
当你运行不同的命令（如 pnpm dev-test）时，Vite 会加载相应的 .env.test 文件，获取对应的环境变量。

3. 配置 Uni 平台变量

通过 Vite 的 define 选项来配置：
在 vite.config.js 文件中，通过 define 选项暴露 Uni 的平台变量。
```
export default {
  define: {
    __UNI_PLATFORM__: JSON.stringify(process.env.UNI_PLATFORM),
  },
}
```

在代码中使用 Uni 平台变量：
在代码中可以使用这些平台变量来判断当前平台环境：

export const platform = __UNI_PLATFORM__
export const isH5 = __UNI_PLATFORM__ === 'h5'
export const isApp = __UNI_PLATFORM__ === 'app'
export const isMp = __UNI_PLATFORM__.startsWith('mp-')

const PLATFORM = {
  platform,
  isH5,
  isApp,
  isMp,
}

export default PLATFORM

这样，你可以在代码中通过 platform 变量灵活地判断当前运行的环境，例如是否为 H5 平台、是否为 App 端或小程序端。

4. 总结

Vite 环境变量：通过 .env 文件进行配置，只有 VITE_ 前缀的变量会暴露给客户端。
不同模式加载：使用 --mode 参数可以指定不同的环境模式，Vite 会自动加载相应的 .env.[mode] 文件。
Uni 环境变量：通过 Vite 的 define 选项定义 Uni 的平台变量，并在代码中灵活判断平台类型。

通过以上步骤，你可以在项目中灵活使用 Vite 和 Uni 的环境变量，实现根据环境和平台进行不同的配置。