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

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

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

核心思想

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

1. 文件结构设计

js 复制代码
📁 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

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

javascript 复制代码
// 从动态生成的环境文件导入配置(使用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. 构建工作流程图

5. 核心脚本实现

javascript 复制代码
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

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

gitignore 复制代码
# 动态生成的环境配置文件
utils/env.js

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

## 使用方式

### 手动执行方式

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

# 测试环境  
npm run test

# 生产环境
npm run prod
相关推荐
万少2 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站4 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名7 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫7 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊7 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter7 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折7 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_8 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
Angelial8 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu8 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端