uni-app多環(huán)境部署解決方案詳解
前言
最近幾周都在處理公司的移動業(yè)務，而為在后期能統(tǒng)一多端，解放自己，迎合公司的技術棧；選用了 uni-app 來開發(fā)。開發(fā)前期重新對公司移動業(yè)務做深入了解，重構大部分業(yè)務邏輯，也抽離出基礎組件；但實際到部署的時候，出現(xiàn)來問題；由于現(xiàn)在只考慮 H5 端，部署和測試會出現(xiàn)多環(huán)境配置，但是我使用的 HBuilderX 工具創(chuàng)建的工程，所以只存在開發(fā)環(huán)境：development 和生產(chǎn)環(huán)境：production。
嘗試幾種方式
查詢官網(wǎng)和論壇并沒有很好的配置方案；官網(wǎng)的一些配置可以提供參考。
- package.json
對于根目錄下 package.json 里可以提供對不同平臺的編譯處理，這里指不同平臺并不是不同環(huán)境，環(huán)境還是只有開發(fā)和生產(chǎn)兩種環(huán)境
- vue.config.js
由于沒有使用 VUE3 來開發(fā)，所以默認的配置項還是基于 webpack。如果項目根目錄沒有該配置項，可以自行創(chuàng)建 vue.config.js 文件，但是很遺憾還是沒有可以處理多種環(huán)境下的一個配置。而且它還存在一些約束：
不過它可以添加一些自定義的變量
const webpack = require('webpack')
module.exports = {
chainWebpack: config => {
config
.plugin('define')
.tap(args => {
args[0]['process.env'].VUE_APP_TEST = '"test"'
return args
})
}
}解決方案
多環(huán)境部署，實際是需要對應自己部署環(huán)境，存在不同配置項。而實際業(yè)務中存在的環(huán)境可以是無限的，一般最基礎而言需要三種：
開發(fā)環(huán)境
測試環(huán)境
生產(chǎn)環(huán)境
對于公司現(xiàn)有業(yè)務，只針對 H5 端，需要的配置可能只有：
接口：開發(fā)、測試、生產(chǎn)對應的接口配置不同
部署路徑：測試、開發(fā)對應的部署路徑不同
如果我們解決這兩個，那部署方案實現(xiàn)一大半。對于環(huán)境配置，從 vue-cli 中可以看到很多；cli 配置基于 .env.x 不同文件來獲取不同配置項，這里我們可以參考它來自己實現(xiàn)獲取配置項。
部署方式
部署方式，通過命令行來解決；后續(xù)可以更好的對接自動化部署，而項目中通過 HBuilderX 工具創(chuàng)建，需要使用它的 cli 程序，它支持常見的三端打包；H5 端打包命令，在 package.json 設置：
"build": "cli publish --platform h5 --project 項目名稱",
獲取接口
項目根目錄創(chuàng)建不同環(huán)境下需要的配置：.env.test、.env.prod。
# .env.test NODE_ENV=test BASE_API = '/test' h5.router.base_config = '/h5/' h5.title_config = 'h5'
實際上我們只需要測試和生產(chǎn)兩種配置，開發(fā)配置項在代碼內部修改，這樣可以增加效率，不用每次修改后，再重啟項目。
配置項對應不同環(huán)境，而環(huán)境可以通過在 package.json 中設置不同參數(shù)來區(qū)分；
"scripts": {
"build:config:test": "node ./deploy/index --mode=test",
"build:config:prod": "node ./deploy/index --mode=prod",
},可以獲取 process.argv 變量讀取到設置的環(huán)境；后續(xù)還想設置什么變量也可以在后面直接添加，類似：--test=test
// yargs.js
module.exports = function() {
let args = process.argv;
let argv = {};
for (let i = 2; i < args.length; ++i) {
let cur = args[i];
if (/^(--)(\S*)(=)/.test(cur)) {
const keys = cur.split('=')
argv[keys[0].slice(2)] = keys[1];
}
}
return argv
}
/**
* {
* mode: 'test'
* }
*/獲取配置后，需要讀取配置，這里直接使用 node 的 fs 模塊讀取文件內容
const fs = require('fs')
const path = require('path')
// 解析函數(shù)
function parse() {
...
}
module.exports = function() {
// 獲取環(huán)境
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));
}
}其中解析函數(shù)，由于不想新增依賴增加項目負擔，直接參考 dotenv 的 parse 函數(shù)解析出文件內容；得到類似的對象：
{
NODE_ENV: 'test',
BASE_API: '/test',
// ...
}解析出配置內容，接下來動態(tài)配置文件；由于項目存在可能部署在客戶內網(wǎng)環(huán)境下，這里采用動態(tài)生產(chǎn)一個共用的配置文件，在項目獲取該配置項；后續(xù)運維人員可以想配置什么就配置什么。
// 寫入 /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)
}在項目中生產(chǎn)環(huán)境下取公用配置項
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 測試和生產(chǎn)環(huán)境上的部署路徑可能會不同；由于創(chuàng)建項目使用其開發(fā)工具創(chuàng)建，需要統(tǒng)一工具和更方便的更新 uni-app，不考慮使用 vue-cli 方式。只能動態(tài)修改 manifest.json 文件。
uni-app 的部署路徑是修改 manifest.json 中 h5.router.base。對應 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(/\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')
}
module.exports = function(options) {
for (let key in options) {
replaceManifest(key, `"${options[key]}"`)
}
fs.writeFileSync(manifestPath, Manifest, {
"flag": "w"
})
}前面我們已經(jīng)獲取到配置文件內容，這里可以直接修改文件；這里需要給一個標明這是修改 manifest.json 的后綴。
h5.router.base_config = '/h5/' h5.title_config = 'h5'
這里配置項如果 _confg 結束的變量就是修改 manifest.json 。
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 是個部署命令，也是我以前基于業(yè)務需要開發(fā)的一個前端簡易部署命令。
其他
這里只針對 H5 端做了處理，如果需要做多平臺，也可以在命令行后面接不同平臺參數(shù)，然后在部署打包前處理好邏輯；比如在打包前根據(jù)自己定義的環(huán)境變量添加參數(shù)
// vue.config.js
const webpack = require('webpack')
// 生成不同環(huán)境不同平臺的配置
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
})
}
}總結
在開發(fā)階段完成后，需要特別注意一些重復的步驟或者是需要手動修改的操作，只要是手動修改，就會增加上線分險，特別是后來者接受項目的時候。當然也要文檔齊全。
相關源碼：地址
到此這篇關于uni-app多環(huán)境部署解決的文章就介紹到這了,更多相關uni-app多環(huán)境部署內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了js實現(xiàn)加載更多功能的方法,以實例演示了加載更多的代碼實現(xiàn),非常具有實用價值,需要的朋友可以參考下2016-10-10
ABP是“ASP.NET Boilerplate Project (ASP.NET樣板項目)”的簡稱，它是一個成熟的開源框架，基于DDD+Repository模式，自帶Zero權限和認證模塊，避免了從零開始搭建框架的煩惱。今天來分享下如何在ABP框架的模式里面使用bootstrapTable組件。2017-07-07
通常我們判斷js圖片大小都是利用images對象，然后再用attr來獲取圖片地址再進行判斷就可以了。這篇文章主要介紹了Javascript判斷圖片尺寸大小的實例,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了Javascript字符串常用方法詳解的相關資料,在平時工作中經(jīng)常會用到的，非常不錯，需要的朋友可以參考下2016-07-07
在學習網(wǎng)頁中的表單驗證，順便學習下正則表達式,在網(wǎng)上找了后發(fā)現(xiàn)了一個比較齊全的資源，稍微進行了一下排版，喜歡的朋友可以收藏2013-11-11
一個dragable的Move對象,大家可以運行下，測試看下效果。2009-08-08
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)更換背景圖片,文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
JavaScript的性能問題不容小覷，這就需要我們開發(fā)人員在編寫JavaScript程序時多注意一些細節(jié)，本文給大家介紹javascript性能優(yōu)化之小知識總結，需要的朋友可以參考下2015-11-11
Array.prototype 的泛型應用分析，需要的朋友可以參考下。2010-04-04
一個簡潔的網(wǎng)頁JS計算器，附詳細代碼釋義。通過下邊的效果演示就可以看到，這是一個挺小的js網(wǎng)頁計算器，界面美化的我想還是不錯的，畢竟在沒有使用任何圖片修飾的情況下，很好看，而且功能挺實用，可以完成基本的數(shù)學算數(shù)運算。2015-11-11