当前位置: 首页 > Web前端 > vue.js

vue-cli3项目 升级到 vue-cli4 的方法总结

时间:2023-04-01 12:28:06 vue.js

vue-cli3椤圭洰鍗囩骇鍒皏ue-cli4鎻掍欢鐨勬€荤粨銆傛彃浠剁増鏈崌绾у埌褰撳墠锛?020-03-19锛夋渶楂樼増鏈紙鍗囩骇浜嗗緢澶歸ebpack鎻掍欢鐗堟湰锛夈€傚崌绾у悗鏂板澶氬煙鍚嶄唬鐞嗛厤缃€傚畼鏂瑰崌绾ф枃妗g偣鎴戙€傛垜浼氭寜鐓у畼鏂规枃妗e崌绾с€傚潙姣旇緝澶氾紝馃槀锛岄厤缃ソ灏卞彲浠ョ洿鎺ョ敤浜嗐€備富瑕佸姛鑳藉寘鎷瑆ebpack鎵撳寘鎵╁睍css锛歴ass鏀寔銆乶ormalize.css銆乢mixin.scss銆乢variables.scssvw銆乺em甯冨眬澶氬煙浠g悊璺ㄥ煙璁剧疆eslint+鏍囧噯璁剧疆鍏敤搴揷dn瀵煎叆璺敱璁捐銆佺櫥褰曟嫤鎴猘xios銆乤pi璁捐vuex鐘舵€佺鐞嗛」鐩湴鍧€锛歷ue-cli4-H5demo鎵撳寘鍦板潃锛歨ttps://zhouyupeng.github.io/2020-03-19/dist/#/浠ヤ笅鏄崌绾ф楠ゅ拰鎬荤粨1.棣栧厛瀹夎鏈€鏂扮殑VueCLIglobal:npminstall-g@vue/cli#ORyarnglobaladd@vue/cli鏌ョ湅瀹夎鐨刢li鐗堟湰vue-V#杈撳嚭锛欯vue/cli4.x.x琛ㄧず@vue/cli4瀹夎鎴愬姛锛坴uecli3鐨剉ersionwillbeOutput3.x.x)瀹夎鍚庢煡鐪嬩竴鐩存槸3.X鐗堟湰锛屼簬鏄嵏杞戒簡vue/cli閲嶆柊鍔犺浇浜嗕竴涓€?.鍦ㄩ」鐩牴鐩綍涓嬫墽琛寁ueupgrade锛屾寜鐓ф彁绀哄崌绾э紝浼氭姤閿欙紝瑙e喅鍔炴硶WARN"css.modules"optioninvue.config.jsisdeprecatednow,pleaseuse"css.requireModuleExtension鈥滃弽鑰屻€俢ss-loader鍗囩骇v3鍚庯紝浣跨敤css.requireModuleExtension浠f浛css.modulescss.loaderOptions寮曞叆鍏ㄥ眬鍙橀噺鍜宮ixin閿欒銆俿ass-loaderv7涔嬪墠锛屼娇鐢╠ata:''锛岀劧鍚庝娇鐢╬rependData:'',prependData:'@import"style/_mixin.scss"';鏇挎崲涔嬪墠鐨勬暟鎹細'@import"style/_mixin.scss"';鍗囩骇ESLint鍚庡洜涓轰娇鐢╯tandard鑰屼笉鏄疨rettier鎶ラ敊锛屽崌绾у悗闇€瑕侀澶栧畨瑁呭洓涓彃浠秐pminstalleslint-plugin-import--save-devnpminstalleslint-plugin-node--save-devnpminstalleslint-plugin-promise--save-devnpminstalleslint-plugin-standard--save-dev鍒犻櫎杩欎釜瀹樻柟宸茬粡娣樻卑鐨剈glifyjs-webpack-plugin锛屼娇鐢╳ebpack4鑷甫鐨刢onsole閰嶇疆銆備笂~