Vue uniapp根據環境變量來修改appid等

前言

∵ 在平時開發中，常常需要根據不同的環境來變更一些內容，比如appid。

∴ (o゜▽゜)o☆

環境

• 使用cli新建的項目

開始

目錄結構

新建manifest.js文件

const fs = require('fs');
// 環境修改 appid 
let appid = process.env.NODE_ENV == "production" ? '生產的appid' : "開發的appid"
// manifest.json 路徑
let manifestFileUrl = `${__dirname}/src/manifest.json`
// 讀取文件數據
let manifestFileData = fs.readFileSync(manifestFileUrl, { encoding: 'utf8' });
// 移除注釋
manifestFileData = manifestFileData.replace(/\/\*[\s\S]*?\*\//g, "")
// 將txt轉成obj
let manifestFileDataObj = JSON.parse(manifestFileData)
// 修改指定key對應的value
manifestFileDataObj['mp-weixin']['appid'] = appid;
// 寫入文件
fs.writeFileSync(manifestFileUrl, JSON.stringify(manifestFileDataObj), { encoding: 'utf8' })

修改package.json文件

{
    ...
    
    "scripts": {
     	"dev:manifest": "cross-env NODE_ENV=development node manifest.js",
    	"build:manifest": "cross-env NODE_ENV=production node manifest.js",
        "dev:mp-weixin-next": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
        "dev:mp-weixin": "npm run dev:manifest && npm run dev:mp-weixin-next",
        "build:mp-weixin-next": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    	"build:mp-weixin": "npm run build:manifest && npm run build:mp-weixin-next",
    	...
    }
    ...
}

修改完成✔

執行

# 開發
npm run dev:mp-weixin
# 生產
npm run build:mp-weixin