uni-app开发时，发现有两种创建项目的方式。不管哪一种创建方式，可知：
1、点击 ‘运行’ 按钮，默认执行的网络环境为：development。此时：
process.env.NODE_ENV === 'development'
2、点击 ‘发行’ 按钮，默认执行的网络环境为：production。此时：
process.env.NODE_ENV === 'production'
3、 process.env.NODE_ENV === 'production' 生成包位置：dist/build/mp-weixin。
4、process.env.NODE_ENV !== 'production' 生成包位置：dist/dev/mp-weixin。
已知这些条件，就想做一些编译优化的处理：
一、配置不同编译环境
1、编译命令配置
为了兼容两种方式创建的项目，同时方便开发调试。出现了相同网络环境，不同配置名称的处理。在项目的根目录 package.json 文件中（可视化创建没有该文件可自行创建），编译配置如下：
"scripts": { "prod:release-mp-weixin": "cross-env NODE_ENV=prod UNI_PLATFORM=mp-weixin vue-cli-service uni-build", "rc:release-mp-weixin": "cross-env NODE_ENV=rc UNI_PLATFORM=mp-weixin vue-cli-service uni-build", "test:release-mp-weixin": "cross-env NODE_ENV=test UNI_PLATFORM=mp-weixin vue-cli-service uni-build", "dev:release-mp-weixin": "cross-env NODE_ENV=dev UNI_PLATFORM=mp-weixin vue-cli-service uni-build", "prod:mp-weixin": "cross-env NODE_ENV=prod UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch", "rc:mp-weixin": "cross-env NODE_ENV=rc UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch", "test:mp-weixin": "cross-env NODE_ENV=test UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch", "dev:mp-weixin": "cross-env NODE_ENV=dev UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch", },
注意：以上编译生成包位置：dist/dev/mp-weixin
另外：
"scripts": { // 与点击“发行”编译相同 包位置：dist/build/mp-weixin "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build", // 与点击“运行”编译相同 包位置：dist/dev/mp-weixin "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch" },
【注意】：复制上述代码的时候，记得把备注删除。否则无法运行。
2、文件配置处理
1、创建如下项目结构配置
.
├── env.js // 网络环境的切换在这里处理 └── libs // 该目录下放置对应的网络环境 ├── env.dev.js // 开发环境 ├── env.prod.js // 生产环境 ├── env.rc.js // 预发环境 └── env.test.js // 测试环境
2、env.js 代码实现：
// development test rc buildPro/watchPro/production console.log("==========NODE_ENV:", process.env.NODE_ENV) let _config = {} if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'dev') { _config = require('./libs/env.dev.js') } else if (process.env.NODE_ENV === 'test') { //测试环境 _config = require('./libs/env.test.js') } else if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'prod') { //生产环境 _config = require('./libs/env.prod.js') } else if (process.env.NODE_ENV === 'rc') { //rc环境 _config = require('./libs/env.rc.js') } // 给环境变量 process.uniEnv 赋值 使用 process.uniEnv.baseUrl if (_config) { process.uniEnv = {}; for (let key in _config) { process.uniEnv[key] = _config[key]; } }
3、对应网络环境域名配置
这里例举一个简单的实例：
const config = { baseUrl: 'http://baidu.com', // 主域名 aaaUrl: 'http://aaa.com', bbbUrl: 'http://bbb.com', ...... environment: 'dev' } module.exports = config;
4、在根目录的 main.js 中导入
// 网络环境配置（导入便会执行） import './env/env.js'
二、动态修改manifest.json参数
通过以上，根据不同的编译方式，可以自动的切换不同的网络环境。
但是这时候又碰到了一个问题。不同的网络环境，可能还需要配置不同的小程序appid。作为一个慵懒的程序员，根据不同的网络环境，手动去修改appid那是不可能的。
动态配置appid，本质就是要动态配置 manifest.json 文件内容，先简单了解下该文件的结构：
{ "name" : "小程序名称", "appid" : "__UNI__9329D99", "description" : "", "versionName" : "1.0.0", "versionCode" : "100", "transformPx" : false, "mp-weixin" : { "appid": "wxe6fc48a27f7591b1", "setting" : { "urlCheck" : false, "es6" : true, "postcss" : true, "minified" : true }, "usingComponents" : true, "permission" : { "scope.userLocation" : { "desc" : "测试" } } }, }
由以上可知，需要修改的是 mp-weixin.appid 的内容，具体实现步骤如下：
1、创建文件
在src根目录下
在src根目录下
在src根目录下
重要事情说三遍（可视化创建的项目，在项目的根目录下）。创建 modifyManifest.js ，并实现如下代码：
const fs = require('fs') //此处如果是用HBuilderX创建的项目manifest.json文件在项目跟目录，如果是 cli 创建的则在 src 下，这里要注意 //process.env.UNI_INPUT_DIR为项目所在的绝对路径，经测试，相对路径会找不到文件 const manifestPath = process.env.UNI_INPUT_DIR + '/manifest.json' let Manifest = fs.readFileSync(manifestPath, { encoding: 'utf-8' }) function replaceManifest(path, value) { const arr = path.split('.') const len = arr.length const lastItem = arr[len - 1] let i = 0 let ManifestArr = Manifest.split(/\n/) for (let index = 0; index < ManifestArr.length; index++) { const item = ManifestArr[index] if (new RegExp(`"${arr[i]}"`).test(item)) ++i; if (i === len) { const hasComma = /,/.test(item) ManifestArr[index] = item.replace(new RegExp(`"${lastItem}"[\\s\\S]*:[\\s\\S]*`), `"${lastItem}": ${value}${hasComma ? ',' : ''}`) break; } } Manifest = ManifestArr.join('\n') } // 动态配置 appid if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'prod' || process.env.NODE_ENV === 'rc'){ replaceManifest('mp-weixin.appid', '正式和预发网络环境的appid') }else { replaceManifest('mp-weixin.appid', '开发和测试网络环境的appid') } fs.writeFileSync(manifestPath, Manifest, { "flag": "w" })
2、导入
将文件的文件导入到 vue.config.js 文件中：
import './modifyManifest.js'
如果没有 vue.config.js 文件，可自行创建，记住这个文件名称不能改。
三、总结
以上两个步骤实现的本质是：
1、根据不同的编译模式配置不同网络环境。
2、根据不同的编译模式配置不同的小程序appid。
3、根据前面两点总结：根据不同的网络环境动态配置appid。
![uniapp发行快应用 [HBuilder] 23:33:45.537 manifest.json->quickapp-webview 缺少 icon 配置如何解决优雅草卓伊凡](https://ucc.alicdn.com/oapu2a2t6nd3o/developer-article1670443/20250706/1ad278f0ee3041ccbe0a0afb1ae16724.jpeg?x-oss-process=image/format,webp/resize,h_160,m_lfit)
