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

遇到一个问题,小程序的域名写死在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
相关推荐
Jinuss1 天前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海1 天前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手1 天前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪1 天前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪1 天前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__1 天前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工1 天前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主1 天前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端
ruanCat1 天前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee1 天前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能