vue如何自動(dòng)化打包測(cè)試環(huán)境和正式環(huán)境的dist/test文件
使用vue現(xiàn)在已經(jīng)差不多2年了，想起來(lái)兩年前的一次和某阿里處理的技術(shù)大牛（當(dāng)時(shí)我們的技術(shù)總監(jiān)）一起開(kāi)發(fā)一個(gè)SPA項(xiàng)目的時(shí)候被硬著頭皮去解決的一個(gè)難題，因?yàn)榧夹g(shù)老大是阿里出身的，所以很多東西都是比較傾向于自動(dòng)化，從項(xiàng)目ui設(shè)計(jì)到項(xiàng)目管理，到打包測(cè)試，到發(fā)布全部都要求我們要實(shí)現(xiàn)自動(dòng)化，盡可能的減少手動(dòng)操作。
當(dāng)時(shí)技術(shù)大佬要求的事在jenkins進(jìn)行一鍵打包，就是他點(diǎn)擊不同的按鈕在同一套代碼上面分別打包測(cè)試環(huán)境運(yùn)行的包和正式環(huán)境運(yùn)行的包，剛剛接觸vue的我摸不著頭腦，老大給了我一天時(shí)間研究這個(gè)玩意，沒(méi)辦法，只好硬著頭皮做，后來(lái)想想改造一下，也比較簡(jiǎn)單。
Step1、package.json中新增命令行腳本test命令,并指向build文件夾下的test.js。
Step2、在在build文件夾中新建test.js,內(nèi)容可以直接拷貝同目錄build.js內(nèi)容,修改一些參數(shù) 這樣就多了個(gè)test環(huán)境
Step3、 在build文件夾中新建webpack.test.conf.js,內(nèi)容可以直接拷貝同目錄webpack.prod.conf.js內(nèi)容,修改一些參數(shù)。
這樣構(gòu)建時(shí)就會(huì)去config文件夾下的test.env.js尋找環(huán)境變量。
Step4、在config下創(chuàng)建test.js文件
Step5、在封裝的axios.js的文件夾下創(chuàng)建config.js
Step6、在封裝的axios引入config.js
封裝的get 和post請(qǐng)求
Step7、在config文件下的index增加test模塊（可復(fù)制build）并更改相應(yīng)的參數(shù)。
在打包的時(shí)候執(zhí)行：npm run test 就會(huì)自動(dòng)的指向測(cè)試環(huán)境的域名dist文件，執(zhí)行npm run build 就會(huì)打包指向正式環(huán)境的域名的dist文件，在Jenkins里面的分別連接至gitlab/github,并將命令分別分配給run test && run build，需要發(fā)布的時(shí)候就直接點(diǎn)擊不同的按鈕，然后再Linux下自動(dòng)打包不同環(huán)境的dist，可以提高開(kāi)發(fā)效率，減少開(kāi)發(fā)和溝通成本。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目中token驗(yàn)證登錄(前端部分)
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目中token驗(yàn)證登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue中引入mousewheel事件及兼容性處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了使用Vue制作圖片輪播組件思路詳解,需要的朋友可以參考下2018-03-03
vue3+element-plus動(dòng)態(tài)路由菜單示例代碼
這篇文章主要介紹了vue3+element-plus動(dòng)態(tài)路由菜單示例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
淺談vue?腳手架文件結(jié)構(gòu)及加載過(guò)程
這篇文章主要介紹了vue腳手架文件結(jié)構(gòu)及加載過(guò)程淺談,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-08
vue.js單頁(yè)面應(yīng)用實(shí)例的簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了vue.js單頁(yè)面應(yīng)用實(shí)例的簡(jiǎn)單實(shí)現(xiàn)，使用單頁(yè)應(yīng)用，沒(méi)有頁(yè)面切換，就沒(méi)有白屏阻塞，可以大大提高 H5 的性能，達(dá)到接近原生的流暢體驗(yàn)。2017-04-04
一文詳解如何創(chuàng)建Vue3項(xiàng)目及組合式API
Vue3提供了一種組合式API,可以用來(lái)構(gòu)建可復(fù)用的組件和應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建Vue3項(xiàng)目及組合式API的相關(guān)資料,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vue中tab選項(xiàng)卡的實(shí)現(xiàn)思路
今天給大家分享vue中tab 選項(xiàng)卡的一些套路，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-11-11
vue.js內(nèi)部自定義指令與全局自定義指令的實(shí)現(xiàn)詳解（利用directive）
這篇文章主要給大家介紹了關(guān)于vue.js內(nèi)部自定義指令與全局自定義指令的實(shí)現(xiàn)方法，vue.js中實(shí)現(xiàn)自定義指令的主要是利用directive，directive這個(gè)單詞是我們寫(xiě)自定義指令的關(guān)鍵字，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
Vue公共loading升級(jí)版解決思路(處理并發(fā)異步差時(shí)響應(yīng))
這篇文章主要介紹了Vue公共loading升級(jí)版（處理并發(fā)異步差時(shí)響應(yīng)）,解決思路是通過(guò)定義一個(gè)全局對(duì)象來(lái)存儲(chǔ)每個(gè)接口的響應(yīng)狀態(tài)，直到每個(gè)請(qǐng)求接口都收到響應(yīng)才變更狀態(tài)，結(jié)束loading動(dòng)畫(huà)，需要的朋友可以參考下2023-11-11