uniapp cli创建的项目如何配置环境变量

在uniapp cli创建的项目中，如何正确配置环境变量？比如开发环境、测试环境和生产环境的不同变量该怎么设置？需要在哪个文件中配置，以及如何在不同环境中访问这些变量？希望能给出具体的配置步骤和示例代码。

2 回复

在项目根目录创建 .env 文件，格式为 VUE_APP_变量名=值。
例如：VUE_APP_API_URL=https://api.example.com
不同环境可创建 .env.development、.env.production 等文件。
代码中通过 process.env.VUE_APP_变量名 调用。


在 UniApp CLI 项目中，可以通过以下步骤配置环境变量，用于区分开发、测试和生产环境：

1. 创建环境变量文件

在项目根目录下创建环境配置文件，例如：

  • .env.development（开发环境）
  • .env.production（生产环境）
  • .env.test（测试环境，可选）

2. 定义环境变量

在文件中定义变量，格式为 键=值：

# .env.development
VUE_APP_API_BASE=https://dev-api.example.com
VUE_APP_MODE=development

# .env.production
VUE_APP_API_BASE=https://api.example.com
VUE_APP_MODE=production

注意：变量名建议以 VUE_APP_ 开头，确保被正确加载。

3. 配置 package.json 脚本

修改 package.json 中的 scripts，指定对应环境：

{
  "scripts": {
    "dev": "uni -p --mode development",
    "build:prod": "uni build --mode production"
  }
}

4. 在代码中使用环境变量

通过 process.env.VUE_APP_xxx 访问：

// 示例：请求接口
const baseURL = process.env.VUE_APP_API_BASE || 'https://default-api.example.com';
uni.request({
  url: `${baseURL}/user/login`,
  // ...
});

5. 环境变量注入原理

UniApp CLI 基于 Vue CLI，使用 dotenv 加载对应文件，变量会在构建时被替换为实际值。

注意事项：

  • 环境变量在构建时静态替换，运行时修改无效。
  • 敏感信息（如密钥）不建议前端暴露，应通过后端中转。
  • 使用 uni.getSystemInfoSync().platform 可补充判断运行平台（如 App、H5）。

通过以上配置，即可灵活管理多环境参数。

回到顶部