目錄
- 前言
- 嘗試幾種方式
- 解決方案
- 部署方式
- 獲取接口
- 部署路徑
- 命令行
- 其他
- 總結
最近幾周都在處理公司的移動業務，而為在后期能統一多端，解放自己，迎合公司的技術棧；選用了 uni-app 來開發。愛掏網 - it200.com開發前期重新對公司移動業務做深入了解，重構大部分業務邏輯，也抽離出基礎組件；但實際到部署的時候，出現來問題；由于現在只考慮 H5 端，部署和測試會出現多環境配置，但是我使用的 HBuilderX 工具創建的工程，所以只存在開發環境：development 和生產環境：production。愛掏網 - it200.com
查詢官網和論壇并沒有很好的配置方案；官網的一些配置可以提供參考。愛掏網 - it200.com
- package.json
對于根目錄下 package.json 里可以提供對不同平臺的編譯處理，這里指不同平臺并不是不同環境，環境還是只有開發和生產兩種環境
- vue.config.js
由于沒有使用 VUE3 來開發，所以默認的配置項還是基于 webpack。愛掏網 - it200.com如果項目根目錄沒有該配置項，可以自行創建 vue.config.js 文件，但是很遺憾還是沒有可以處理多種環境下的一個配置。愛掏網 - it200.com而且它還存在一些約束：
不過它可以添加一些自定義的變量
const webpack = require("webpack")
module.exports = {
chainWebpack: cOnfig=> {
config
.plugin("define")
.tap(args => {
args[0]["process.env"].VUE_APP_TEST = ""test""
return args
})
}
}
多環境部署，實際是需要對應自己部署環境，存在不同配置項。愛掏網 - it200.com而實際業務中存在的環境可以是無限的，一般最基礎而言需要三種：
開發環境
測試環境
生產環境
對于公司現有業務，只針對 H5 端，需要的配置可能只有：
接口：開發、測試、生產對應的接口配置不同
部署路徑：測試、開發對應的部署路徑不同
如果我們解決這兩個，那部署方案實現一大半。愛掏網 - it200.com對于環境配置，從 vue-cli 中可以看到很多；cli 配置基于 .env.x 不同文件來獲取不同配置項，這里我們可以參考它來自己實現獲取配置項。愛掏網 - it200.com
部署方式
部署方式，通過命令行來解決；后續可以更好的對接自動化部署，而項目中通過 HBuilderX 工具創建，需要使用它的 cli 程序，它支持常見的三端打包；H5 端打包命令，在 package.json 設置：
"build": "cli publish --platform h5 --project 項目名稱",
獲取接口
項目根目錄創建不同環境下需要的配置：.env.test、.env.prod。愛掏網 - it200.com
# .env.test NODE_ENV=test BASE_API = "/test" h5.router.base_cOnfig= "/h5/" h5.title_cOnfig= "h5"
實際上我們只需要測試和生產兩種配置，開發配置項在代碼內部修改，這樣可以增加效率，不用每次修改后，再重啟項目。愛掏網 - it200.com
配置項對應不同環境，而環境可以通過在 package.json 中設置不同參數來區分；
"scripts": {
"build:config:test": "node ./deploy/index --mode=test",
"build:config:prod": "node ./deploy/index --mode=prod",
},
可以獲取 process.argv 變量讀取到設置的環境；后續還想設置什么變量也可以在后面直接添加，類似：--test=test
// yargs.js
module.exports = function() {
let args = process.argv;
let argv = {};
for (let i = 2; i
獲取配置后，需要讀取配置，這里直接使用 node 的 fs 模塊讀取文件內容
const fs = require("fs")
const path = require("path")
// 解析函數
function parse() {
...
}
module.exports = function() {
// 獲取環境
const cOnfig= yargs();
const env = config.mode;
const envPath = path.resolve(__dirname, "../../") + "/.env." + env
try{
const data = fs.readFileSync(envPath, "utf8")
// 解析文件
return parse(data)
}catch(e){
console.log("讀取env出錯：" + JSON.stringify(e));
}
}
其中解析函數，由于不想新增依賴增加項目負擔，直接參考 dotenv 的 parse 函數解析出文件內容；得到類似的對象：
{
NODE_ENV: "test",
BASE_API: "/test",
// ...
}
解析出配置內容，接下來動態配置文件；由于項目存在可能部署在客戶內網環境下，這里采用動態生產一個共用的配置文件，在項目獲取該配置項；后續運維人員可以想配置什么就配置什么。愛掏網 - it200.com
// 寫入 /static/global.js
writeGlobalConfig()
function writeGlobalConfig() {
const _global = {}
for (let key in config) {
if (key.includes("_API")) {
_global[key] = config[key]
}
}
const data = `window._GLOBAL__ = ${JSON.stringify(_global)}`
fs.writeFileSync(path.resolve(__dirname, "../static/global.js"), data)
}
在項目中生產環境下取公用配置項
const NODE_ENV = process.env.NODE_ENV;
/// 默認根目錄模板 tempalte.h5 模板引入全局接口 static/global.js
const GLOBAL_COnFIG= window._GLOBAL__ || {};
const defaultAPI = {
BASE_API: {
development: ["/test"],
production: GLOBAL_CONFIG.BASE_API,
},
SOCKET_API_BIDDIGN: {
development: ["ws://test"],
production: GLOBAL_CONFIG.SOCKET_API_BIDDIGN,
},
// ...
}
部署路徑
PC 端或者是 H5 測試和生產環境上的部署路徑可能會不同；由于創建項目使用其開發工具創建，需要統一工具和更方便的更新 uni-app，不考慮使用 vue-cli 方式。愛掏網 - it200.com只能動態修改 manifest.json 文件。愛掏網 - it200.com
uni-app 的部署路徑是修改 manifest.json 中 h5.router.base。愛掏網 - it200.com對應 Router 中的 base
// manifest.js
const fs = require("fs")
const path = require("path")
const manifestPath = path.resolve(__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(/
/)
for (let index = 0; index
前面我們已經獲取到配置文件內容，這里可以直接修改文件；這里需要給一個標明這是修改 manifest.json 的后綴。愛掏網 - it200.com
h5.router.base_cOnfig= "/h5/" h5.title_cOnfig= "h5"
這里配置項如果 _confg 結束的變量就是修改 manifest.json 。愛掏網 - it200.com
const path = require("path")
const fs = require("fs")
const env = require("./modules/readEnv")
const parseManifest = require("./modules/manifest")
const cOnfig= env();
function writeManifest() {
const _global = {}
for (let key in config) {
if (key.includes("_config")) {
const k = key.slice(0, -7)
_global[k] = config[key]
}
}
parseManifest(_global);
}
命令行
準備工作完成后，可以編寫對應的命令，來簡化我們的操作；
"scripts": {
"build": "cli publish --platform h5 --project test-h5",
"build:config:test": "node ./deploy/index --mode=test",
"build:config:prod": "node ./deploy/index --mode=prod",
"build:prod": "npm run build:config:prod && npm run build",
"deploy:test": "npm run build:config:test && npm run build && fd-cli"
},
&& 符號是串行命令；& 是并行命令，其中 fd-cli 是個部署命令，也是我以前基于業務需要開發的一個前端簡易部署命令。愛掏網 - it200.com
其他
這里只針對 H5 端做了處理，如果需要做多平臺，也可以在命令行后面接不同平臺參數，然后在部署打包前處理好邏輯；比如在打包前根據自己定義的環境變量添加參數
// vue.config.js
const webpack = require("webpack")
// 生成不同環境不同平臺的配置
const cOnfig= require("./config")
module.exports = {
chainWebpack: cOnfig=> {
config
.plugin("define")
.tap(args => {
// config.VUE_APP_TEST
for(let key in config) {
args[0]["process.env"][key] = `"${config.VUE_APP_TEST}"`
}
return args
})
}
}
在開發階段完成后，需要特別注意一些重復的步驟或者是需要手動修改的操作，只要是手動修改，就會增加上線分險，特別是后來者接受項目的時候。愛掏網 - it200.com當然也要文檔齊全。愛掏網 - it200.com
相關源碼：地址
到此這篇關于uni-app多環境部署解決的文章就介紹到這了,更多相關uni-app多環境部署內容請搜索編程筆記以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持編程筆記！