您好,登錄后才能下訂單哦!
需求
首先介紹一下本項(xiàng)目的背景,是基于 vue-cli3.1.1 的單頁(yè)應(yīng)用,目前測(cè)試環(huán)境和生產(chǎn)環(huán)境都在線上,并且都在同一個(gè)域名下,其中生產(chǎn)環(huán)境部署在根目錄下,測(cè)試環(huán)境部署在名為 test 的子目錄下,根據(jù)生產(chǎn)環(huán)境和測(cè)試環(huán)境的不同,某些界面和交互有細(xì)微的差別。
根據(jù)以上項(xiàng)目的基本情況,分析出需求如下:
配置環(huán)境變量和模式
根據(jù) vue-cli3 文檔,可以通過(guò)設(shè)置項(xiàng)目根目錄下的 .env,.env.[mode] 文件來(lái)指定環(huán)境變量。
創(chuàng)建一個(gè) .env 和 .env.beta 文件,在 .env 文件中,配置如下:
VUE_APP_URL = '/' // 用來(lái)設(shè)置項(xiàng)目的 baseUrl 和路由的 base 選項(xiàng) 默認(rèn)是根目錄 VUE_APP_MODE = '' // 設(shè)置一個(gè)變量 區(qū)分線上生產(chǎn)環(huán)境和線上測(cè)試環(huán)境 默認(rèn)是生產(chǎn)環(huán)境 outputDir = 'dist' // 用來(lái)設(shè)置打包后生成的文件夾的名字,默認(rèn)為 dist 文件夾
在 .env.beta 文件中,配置線上測(cè)試環(huán)境,如下:
NODE_ENV = 'production' // 因?yàn)槭谴虬?xiàng)目 所以 NODE_ENV 還是 production VUE_APP_URL = '/test/' // 線上測(cè)試環(huán)境,部署在 test 目錄下 VUE_APP_MODE = 'test' // 這個(gè)變量表示當(dāng)前是線上測(cè)試環(huán)境 outputDir = 'beta' // 將線上測(cè)試環(huán)境打包后生成的代碼放在 beta 文件夾下,以示區(qū)別。
定義好環(huán)境變量之后,把項(xiàng)目制定的路徑配置到路由和 vue 配置文件中去:
// router.js export default new Router({ base: process.env.VUE_APP_URL, ... }) // vue.config.js module.exports = { baseUrl: process.env.VUE_APP_URL, // 從 Vue CLI 3.3 起已棄用,改成publicPath }
在項(xiàng)目代碼中,可以在任意位置使用 process.env.VUE_APP_MODE 的值來(lái)判斷是線上生產(chǎn)環(huán)境還是線上測(cè)試環(huán)境,用以編寫不同的業(yè)務(wù)代碼。例:
if(process.env.VUE_APP_MODE == 'test'){ this.name = '線上測(cè)試用戶' }
配置好不同模式的環(huán)境變量之后,在 package.json 里面設(shè)置一個(gè) beta 模式:
{ "scripts": { ... "beta": "vue-cli-service build --mode beta" } }
這樣配置完之后,在命令行運(yùn)行 npm run beta ,會(huì)在根目錄下生成一個(gè) beta 文件夾,里面就是打包出來(lái)的線上測(cè)試版本的項(xiàng)目文件。
至此就完成了分環(huán)境配置打包,但是這樣的麻煩點(diǎn)在于,每次要在命令行輸入兩次命令,因?yàn)槲覀兊捻?xiàng)目文件都是發(fā)送給后端去部署,所以還需要把文件壓縮成 zip,每次都要手動(dòng)操作,是在有點(diǎn)累。所以,還需要進(jìn)行一些小小的改造,徹底解放俺們的雙手~~
合并構(gòu)建打包命令并且自動(dòng)生成壓縮文件
將兩個(gè)命令合并成一個(gè)很簡(jiǎn)單,只需要在 package.json 里面配置一下,新建一個(gè)新的命令用于同時(shí)調(diào)用兩個(gè)命令。
{ "scripts": { ... "beta": "vue-cli-service build --mode beta", "publish": "vue-cli-service build && vue-cli-service build --mode beta" } }
這樣配置好之后,只要執(zhí)行npm run publish, 它會(huì)自動(dòng)先執(zhí)行正式環(huán)境構(gòu)建打包,完成之后再自動(dòng)執(zhí)行測(cè)試環(huán)境的構(gòu)建打包,hin是方便~~
接著再配置自動(dòng)壓縮,這里就需要使用到一個(gè) webpack 的插件 — filemanager-webpack-plugin。
先安裝,可以在命令行安裝,也可以直接在 vue-cli3 自帶的圖形管理界面搜索安裝,都挺方便。
npm install filemanager-webpack-plugin -dev
安裝完成之后,在 vue.config.js 里面配置一下這個(gè)插件,它提供了豐富的操作文件的選項(xiàng) ,這里我只需要使用刪除和壓縮:
let ts = Date.parse(new Date()); module.exports = { ..., chainWebpack: (config) => { if(process.env.VUE_APP_MODE == 'test'){ config.plugin('compress') .use(FileManagerPlugin, [{ onEnd: { delete: [ //首先需要?jiǎng)h除項(xiàng)目根目錄下的dist.zip './*.zip', ], archive: [ //然后我們選擇dist文件夾將之打包成dist.zip并放在根目錄 {source: './dist', destination: `./biProject-${ts}-production.zip`}, {source: './beta', destination: `./biProject-${ts}-test.zip`} ] } }]) } } }
PS:vue-cli3開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境的區(qū)分
在vue-cli3的項(xiàng)目中,
npm run serve時(shí)會(huì)把process.env.NODE_ENV設(shè)置為‘development';
npm run build 時(shí)會(huì)把process.env.NODE_ENV設(shè)置為‘production';
或,配置publicPath等:
publicPath: process.env.NODE_ENV === 'production' ? 'https://cdn.xxx.com/folder' : '';
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。