微信小程序环境变量设置方案

22 阅读2分钟

遇到一个问题,小程序的域名写死在config.js中,根据自定义的变量去获取对应的请求域名。

那么多年相安无事,最近翻车了。被扫出来了,立正挨打。改成根据环境变量设置。

image.png

核心思想

通过Node.js脚本在构建时动态生成环境配置文件,确保最终打包的小程序代码中只包含目标环境的配置信息,从根本上避免测试环境域名被扫描到的安全风险。

1. 文件结构设计

📁 e-mini-feat/
├── 📄 package.json (新增构建脚本)
├── 📁 scripts/
│   └── 📄 set-env.js (环境配置脚本)
├── 📁 utils/
│   ├── 📄 config.js (改造后的配置文件)
│   └── 📄 env.js (动态生成,不进入版控)
└── 📄 .gitignore (新增 utils/env.js)

2. 核心改造点

原始问题:

  • utils/config.js 中硬编码了所有环境的域名
  • 测试环境域名暴露在生产代码中

解决方案:

  • 将环境配置提取到独立的动态文件 utils/env.js
  • 通过 Node.js 脚本根据构建环境生成对应配置
  • utils/config.js 从动态文件导入配置,保持API不变

3. 改造后的 utils/config.js

把原先写死的请求域名,删掉,改成从 动态文件 中获取

// 从动态生成的环境文件导入配置(使用CommonJS格式)
const { BASE_URL } = require('./env.js')

// 省略我的项目代码


const obj = {

  local: function() {
    return BASE_URL  // 直接使用动态导入的URL
  },

  isTest: function(){
    // 根据BASE_URL判断是否为测试环境
    return BASE_URL.includes('uat-traceable') || BASE_URL.includes('dev-traceable')
  },
 
}

module.exports = obj

4. 构建工作流程图

image.png

5. 核心脚本实现

const fs = require('fs')
const path = require('path')

// 配置不同环境下的环境变量值
const CONFIG = {
  dev: {
    BASE_URL: 'https://dev-traceable.ezcun.com/api/user-api/',
    ENV_NAME: 'development'
  },
  test: {
    BASE_URL: 'https://uat-traceable.ezcun.com/api/user-api/',
    ENV_NAME: 'testing'
  },
  prod: {
    BASE_URL: 'https://traceable.ezcun.com/api/user-api/',
    ENV_NAME: 'production'
  }
}

// 获取当前环境
const env = process.env.NODE_ENV?.replace(/'/g, '').trim() || 'dev'
console.log(`🔧 正在为 ${env} 环境生成配置...`)

// 获取当前环境对应的配置
const targetConfig = CONFIG[env]
if (!targetConfig) {
  console.error(`❌ 未知环境: ${env}`)
  process.exit(1)
}

// 生成配置文件内容(使用CommonJS格式,兼容小程序环境)
const configContent = `// 此文件由 scripts/set-env.js 自动生成,请勿手动修改
// 生成时间: ${new Date().toLocaleString()}
// 目标环境: ${env}

module.exports = {
  BASE_URL: '${targetConfig.BASE_URL}',
  ENV_NAME: '${targetConfig.ENV_NAME}'
}
`

// 确保目标目录存在
const utilsDir = path.join(process.cwd(), 'utils')
if (!fs.existsSync(utilsDir)) {
  fs.mkdirSync(utilsDir, { recursive: true })
}

// 写入配置文件
const envFilePath = path.join(utilsDir, 'env.js')
fs.writeFileSync(envFilePath, configContent, 'utf8')

console.log(`✅ 环境配置已生成: ${envFilePath}`)
console.log(`📍 当前环境: ${env}`)
console.log(`🌐 API地址: ${targetConfig.BASE_URL}`)

package.json

{
  "scripts": {
    "dev": "cross-env NODE_ENV=dev node scripts/set-env.js",
    "test": "cross-env NODE_ENV=test node scripts/set-env.js", 
    "prod": "cross-env NODE_ENV=prod node scripts/set-env.js",
    "build:dev": "npm run dev",
    "build:test": "npm run test",
    "build:prod": "npm run prod"
  },
  "devDependencies": {
    "cross-env": "^7.0.3"
  }
}

5. 版本控制配置

文件位置.gitignore

# 动态生成的环境配置文件
utils/env.js

# 其他忽略文件...
``

## 使用方式

### 手动执行方式

```bash
# 开发环境
npm run dev

# 测试环境  
npm run test

# 生产环境
npm run prod

6. 自动配置

image.png