uniapp .env文件如何使用

在uniapp中如何使用.env文件？我按照官方文档配置了.env文件，但发现引用process.env时始终获取不到环境变量。请问在uniapp项目中应该如何正确配置和使用.env文件？具体需要在哪里定义变量？开发环境和生产环境是否需要分别配置？变量引用时是否需要特殊的前缀处理？如果遇到process.env始终为undefined的情况该如何排查？最好能提供示例代码说明具体配置步骤。

2 回复

在项目根目录创建.env文件，定义环境变量如VUE_APP_API_URL=xxx。不同环境可创建.env.production、.env.development等文件。代码中通过process.env.VUE_APP_API_URL访问。注意：变量名必须以VUE_APP_开头才能被识别。


在 UniApp 中，.env 文件用于管理不同环境（如开发、测试、生产）的配置变量。以下是使用方法：

1. 创建 .env 文件

在项目根目录下创建以下文件（按需选择）：

  • .env：全局默认配置
  • .env.development：开发环境
  • .env.production：生产环境

2. 定义环境变量

在文件中以 键=值 格式定义变量，例如：

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

注意：变量名需以 VUE_APP_ 开头（UniApp 基于 Vue.js，遵循 Vue CLI 规范）。

3. 在代码中调用

通过 process.env 对象访问变量：

// 在 js/ts 文件中
const apiBase = process.env.VUE_APP_API_BASE;
console.log(apiBase); // 输出：https://dev-api.example.com

// 在 vue 模板中也可使用
export default {
  data() {
    return {
      baseURL: process.env.VUE_APP_API_BASE
    }
  }
}

4. 配置 package.json 脚本

在 package.json 中指定环境启动项目：

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

运行命令时自动加载对应环境文件（如 npm run dev 加载 .env.development）。

5. 注意事项

  • 变量仅支持静态值，不支持动态表达式。
  • 修改 .env 文件后需重启项目生效。
  • 敏感信息（如密钥）不建议直接存入，可通过 CI/CD 工具注入。

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

回到顶部