uni-app 配置编译环境与动态修改manifest

"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;

}

最后

给大家送上我成功跳槽复习中所整理的资料，由于文章篇幅有限，所以只是把题目列出来了

RegExp("${lastItem}"[\\s\\S]*:[\\s\\S]*), "${lastItem}": ${value}${hasComma ? ',' : ''})

  break;

}

最后

给大家送上我成功跳槽复习中所整理的资料，由于文章篇幅有限，所以只是把题目列出来了

[外链图片转存中…(img-GfHn7zkv-1720100519024)]

[外链图片转存中…(img-uuLxe9Rh-1720100519024)]

[外链图片转存中…(img-4W2nmMko-1720100519024)]