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

遇到一个问题,小程序的域名写死在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
相关推荐
weelinking6 分钟前
【claude】14_Claude作为技术文档助手
前端·人工智能·react.js·数据挖掘·前端框架
jiayong2312 分钟前
前端面试题库 - JavaScript核心基础篇
前端·javascript·面试
软件技术NINI26 分钟前
泉州html+css 4页
前端·javascript·css·html
再吃一根胡萝卜27 分钟前
OpenScreen:免费开源的录屏神器,做出专业级演示视频
前端
Cloud_Shy61828 分钟前
Python 数据分析基础入门:《Excel Python:飞速搞定数据分析与处理》学习笔记系列(第十一章 Python 包跟踪器 下篇)
前端·后端·python·数据分析·excel
kyriewen30 分钟前
我用AI把公司10万行代码屎山重构了,CTO看了代码后说:你提前转正
前端·javascript·ai编程
ttwuai32 分钟前
XYGo Admin 菜单与路由:Vue3 动态路由 + GoFrame 权限菜单的完整实现方案
前端·vue·后台框架
程序员码歌41 分钟前
OpenSpec 到 Superpowers:AI 编码从说清到做对
android·前端·人工智能
爱编程的小新☆41 分钟前
LangGraph4j工作流框架
前端·数据库·ai·langchain·langgraph4j