vue如何自动化打包测试环境和正式环境的dist/test文件
使用vue现在已经差不多2年了，想起来两年前的一次和某阿里处理的技术大牛（当时我们的技术总监）一起开发一个SPA项目的时候被硬着头皮去解决的一个难题，因为技术老大是阿里出身的，所以很多东西都是比较倾向于自动化，从项目ui设计到项目管理，到打包测试，到发布全部都要求我们要实现自动化，尽可能的减少手动操作。
当时技术大佬要求的事在jenkins进行一键打包，就是他点击不同的按钮在同一套代码上面分别打包测试环境运行的包和正式环境运行的包，刚刚接触vue的我摸不着头脑，老大给了我一天时间研究这个玩意，没办法，只好硬着头皮做，后来想想改造一下，也比较简单。
Step1、package.json中新增命令行脚本test命令,并指向build文件夹下的test.js。
Step2、在在build文件夹中新建test.js,内容可以直接拷贝同目录build.js内容,修改一些参数 这样就多了个test环境
Step3、在build文件夹中新建webpack.test.conf.js,内容可以直接拷贝同目录webpack.prod.conf.js内容,修改一些参数。
这样构建时就会去config文件夹下的test.env.js寻找环境变量。
Step4、在config下创建test.js文件
Step5、在封装的axios.js的文件夹下创建config.js
Step6、在封装的axios引入config.js
封装的get 和post请求
Step7、在config文件下的index增加test模块（可复制build）并更改相应的参数。
在打包的时候执行：npm run test 就会自动的指向测试环境的域名dist文件，执行npm run build 就会打包指向正式环境的域名的dist文件，在Jenkins里面的分别连接至gitlab/github,并将命令分别分配给run test && run build，需要发布的时候就直接点击不同的按钮，然后再Linux下自动打包不同环境的dist，可以提高开发效率，减少开发和沟通成本。
绛旓細Step4銆佸湪config涓嬪垱寤簍est.js鏂囦欢Step5銆佸湪灏佽鐨刟xios.js鐨勬枃浠跺す涓嬪垱寤篶onfig.jsStep6銆佸湪灏佽鐨刟xios寮曞叆config.js灏佽鐨刧et 鍜宲ost璇锋眰Step7銆佸湪config鏂囦欢涓嬬殑index澧炲姞test妯″潡锛堝彲澶嶅埗build锛夊苟鏇存敼鐩稿簲鐨勫弬鏁般傚湪鎵撳寘鐨勬椂鍊欐墽琛岋細npm run test 灏变細鑷姩鐨勬寚鍚娴嬭瘯鐜鐨勫煙鍚峝ist鏂囦欢锛屾墽琛宯pm run...
绛旓細鎿嶄綔 鍦╬ackage.json涓殑scripts涓坊鍔犵浉鍏崇幆澧冨湴鍧锛屾垜鐨勭幆澧冩坊鍔犲涓嬶細test 涓轰簯娴嬭瘯鐜 涓嬮潰鎴戜滑浠est鏉ラ厤缃幆澧 鍦╟onfig鐩綍涓厤缃畉est.env.js鏂囦欢 } (1) 閰嶇疆process.env.NODE_ENV = 'test'(2) const webpackConfig = require('./webpack.test.conf锛(1) 澶嶅埗webpack.prod.conf.js, 骞...
绛旓細鏍规嵁鏌ヨ鐩稿叧鍏紑淇℃伅锛娴嬭瘯鐜鎵撳寘鍚庣殑椤圭洰鏍峰紡涓庢寮忕幆澧冩墦鍖呯殑鏍峰紡涓嶄竴鑷磋鏌ョ湅vue-cli2閰嶇疆锛屽彂鐜拌窡鏍峰紡鐩稿叧鍙婄幆澧冪浉鍏崇殑閰嶇疆灏变竴澶勶紝鍦╞uild/vue-loader.conf.js涓殑extract锛歩sProduction锛屽皢鍏舵敼涓簍rue鍚庯紝娴嬭瘯鐜鎵撳寘鍚庣殑鏍峰紡涓庢寮忕幆澧冩墦鍖呭悗鐨勬牱寮忎竴鑷翠簡銆
绛旓細Vue build ==> 鎵撳寘鏂瑰紡锛屽洖杞﹀嵆鍙锛汭nstall vue-router ==> 鏄惁瑕佸畨瑁 vue-router锛岄」鐩腑鑲畾瑕佷娇鐢ㄥ埌 鎵浠 鍥炶溅锛沀se ESLint to lint your code ==> 鏄惁闇瑕 js 璇硶妫娴 鐩墠鎴戜滑涓嶉渶瑕 鎵浠 n 鍥炶溅锛汼et up unit tests ==> 鏄惁瀹夎 鍗曞厓娴嬭瘯宸ュ叿 鐩墠鎴戜滑涓嶉渶瑕 鎵浠 n 鍥炶溅锛汼etup...
绛旓細鍙互鐪嬩竴涓媢ni-app鐨勭浉鍏宠祫鏂欙紝鐢╲ue鐨勮娉曞疄鐜颁笖鑳藉悓鏃跺彂甯冨埌澶氫釜缁堢銆傚畨瑁匟BX鏂板缓uni-app椤圭洰灏卞彲浠ヤ簡锛屼笉闇瑕侀厤缃祴璇曞拰鐢熶骇鐜
绛旓細鍥犳,鎴戜滑鍙互鍒涘缓鍙互涓鐩磋繍琛岀殑鑷姩鍖栨祴璇,骞朵繚璇佹垜浠殑浠ｇ爜鍙互姝ｅ父杩愯銆傚湪鏈枃涓,鎴戜滑灏嗕负VueJS鍒涘缓涓浜涚畝鍗曠殑鍗曞厓娴嬭瘯銆傝杩涜娴嬭瘯,鎴戜滑灏嗗厛鍒朵綔涓涓熀鏈殑寰呭姙浜嬮」鍒楄〃缁勪欢銆傛垜浠皢娴嬭瘯璇ュ垪琛ㄦ槸鍚︽纭樉绀,骞朵笖鐢ㄦ埛鍙互灏嗘柊椤圭洰娣诲姞鍒板緟鍔炰簨椤瑰垪琛ㄤ腑銆傚笇鏈涘湪鏈暀绋嬬粨鏉熶箣鍓,鎮ㄥ彲浠ョ紪鍐欐祴璇,妫鏌ユ偍鐨勭粍浠惰緭鍑虹粰鐢ㄦ埛...
绛旓細娴嬭瘯鐜鐨勫垎鏀瓨鍦╞ug锛屼竴鑸笉浼氳鐢ㄦ埛鍜屽叾浠栦汉鐪嬪埌锛屽苟涓旀祴璇曠幆澧冧細灏介噺涓庣敓浜х幆澧冪浉浼笺傚浣曞尯鍒嗙敓浜鐜鍜寮鍙戠幆澧冿紵process.env.NODE_ENV 鏄 node 鐨勫叏灞鍙橀噺 process 鐨勪竴涓睘鎬э紝瀹冪殑浣滅敤鏄尯鍒嗗綋鍓嶇幆澧冩槸鐢熶骇鐜杩樻槸寮鍙戠幆澧冿紝鍙互鍙傝冨涔狅細 鐞嗚Вwebpack涓殑process.env.NODE_ENV 鍏跺疄涓鑸殑vue...
绛旓細缃戠粶淇″彿宸vue3浠ｇ爜鍦娴嬭瘯鐜缃戠粶鍙疯岀敓浜х幆澧冩槸缃戠粶淇″彿宸鑷寸殑鎶ラ敊銆傝杞欢鏄竴娆鹃潪甯搁渶瑕佺綉缁滅姸鍐典紭绉鐨勫钩鍙帮紝鍦ㄧ綉缁滀笉浣崇殑鏃讹紝浼氬鑷存骞冲彴杩炴帴澶辫触鏃犳硶鏌ョ湅淇℃伅浠ュ強鎶ラ敊绛夋儏鍐碉紝鍙皢鍏舵洿鎹㈢綉缁滀负浼樼缃戠粶鍗冲彲銆備唬鐮侊紙code锛夋槸绋嬪簭鍛樼敤寮鍙戝伐鍏锋墍鏀寔鐨勮瑷鍐欏嚭鏉ョ殑婧愭枃浠讹紝鏄竴缁勭敱瀛楃銆佺鍙锋垨淇″彿...
绛旓細vue涓嶅彂甯冨彧鑳藉湪鏈湴浣跨敤锛屽洜涓簐ue鍙湁閫氳繃鍙戝竷浜嗘墠鑳藉湪澶栭儴鐜娴忚銆備絾鏄笉鍙戝竷椤圭洰涔熷彲浠ヤ娇鐢紝涔熷氨鏄垜浠墍璇寸殑寮鍙戠幆澧冿紝鍦ㄦ湰鍦扮數鑴戣繘琛岄」鐩紑鍙戯紝缂栧啓浠ｇ爜锛娴嬭瘯浠ｇ爜銆傚洜涓簐ue妗嗘灦鏈韩灏卞仛浜嗕袱濂楁柟寮忥紝涓濂楁槸寮鍙戠幆澧冿紝涓濂楁槸鎵撳寘鍙戝竷鐨勭幆澧冿紝鎵浠ユ垜浠彲浠ヤ娇鐢ㄥ紑鍙戠幆澧冨悓鏍风殑鍙互灏嗛」鐩窇璧锋潵銆
绛旓細鍦ㄦ湰鍦拌繍琛屾牱寮忔病闂锛鎵撳寘鍚庡埌娴嬭瘯鐜锛屽氨鍑虹幇闂锛屽彲浠ョ湅鍒板姞杞界殑css椤哄簭鍙樺寲浜嗐傜粺涓淇敼鏌愪釜class,鏈湴涓篈瑕嗙洊浜咮锛屾墦鍖呭悗鍙兘涓築瑕嗙洊浜咥銆傛煡鎵句簡寰堝鏂囩珷閮借鏄姞杞絚ss椤哄簭涓嶄竴鏍峰鑷寸殑锛岀殑纭姝ゃ傚線寰鏄湪鏌愪釜缁勪欢涓紝娌℃湁鐢╯coped,瀵艰嚧姹℃煋浜嗗叏灞鐨勬牱寮忋傛垜鐨勯」鐩槸鍥犱负涔嬪墠澶氫汉寮鍙戯紝涓...
