Uniapp 環境變量設置記錄

Uniapp 環境變量設置記錄

官方文檔：https://uniapp.dcloud.io/collocation/vue-config

官方文檔只是說明了最核心的配置方式，但稍微注意一下，因爲官方文檔默認，用戶是Node高手，所以不會告知以下幾個坑。

1. 在項目文件夾內安裝，對應的插件。如：webpack,copy-webpack-plugin。

   這兩個依賴項，用於修改環境變量，與拷貝複製。請按需安裝。

2. 傳入參數時，要嚴格按照類型來傳入，自定義環境變量，如果這個變量是string類型

   比如：官方內置，修改 manifest.json 時，實例replaceManifest函數中，"xxxx"字符串，需要用'"xxx"',單引號包裹，才能傳入正確類型.

片段

本片段，是通過外部導入自定義配置文件，只要傳入對應的配置序號，就能替換覆蓋環境變量，與wxAppID，自己編譯

const webpack = require('webpack') // 記得安裝 npm install webpack
const fs = require('fs')
const path = require('path')

// 對應 wx_client_list.json 客戶端序號
const CLIENT_index = 0;

// 同步獲取 json 文件，字符串
let wx_client_list = fs.readFileSync(path.join(__dirname,'wx_client_list.json'),{ encoding: 'utf-8' })
wx_client_list = JSON.parse(wx_client_list);// 序列化成對象


// 讀取 manifest.json ，修改後重新寫入
const manifestPath = path.join(__dirname,'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')
}
// 使用
replaceManifest('mp-weixin.appid', '"'+wx_client_list.data[CLIENT_index].key+'"')
// 同步寫入文件
fs.writeFileSync(manifestPath, Manifest, {
  "flag": "w"
})

module.exports = {
  chainWebpack: config => {
    config
      .plugin('define')
      .tap(args => {
      // 設置 內部 env 環境變量
        args[0]['process.env'].CLIENT_ID = wx_client_config.data[CLIENT_index].id // 數字類型
        args[0]['process.env'].SERVER_DEVELOPMENT = '"'+wx_client_config.server_config.development+'"' // 字符串類型
        args[0]['process.env'].SERVER_PRODUCTION = '"'+wx_client_config.server_config.production+'"' // 字符串類型
        return args
      })
  }
}