从Vue-cli迁移到Vite

鑳屾櫙鎴戞渶杩戝皢涓€浜沄ue2椤圭洰浠巚ue-cli(webpack)杩佺Щ鍒皏ite銆傚湪绗笁娆¤繖鏍峰仛涔嬪悗锛屾垜瀵硅縼绉昏繃绋嬪仛浜嗕竴浜涜缁嗙殑璁板綍锛屽苟灏嗗湪杩欑瘒鏂囩珷涓繘琛屾€荤粨銆傛枃绔犵洰褰曪細package.jsonindex.htmlvite.config.jstestcaseLintreleasevisualizationBundlesomeindicatorsconclusiontextpackage.jsondevDependenciesdelete@vue/cli-servicedependencyandreplaceitwithvite馃殌npmun@vue/cli-servicenpmivite-D鎮ㄨ繕鍙互鍒犻櫎浠vue/cli-plugin-xxx寮€澶寸殑浠讳綍鍏朵粬寮€鍙戜緷璧栭」锛屽洜涓哄畠浠皢涓嶅啀璧蜂綔鐢紝渚嬪锛歯pmunvue/cli-plugin-babelvue/cli-plugin-eslintvue/cli-plugin-unit-jest濡傛灉浣犱娇鐢ㄧ殑鏄疺ue2锛屾垜浠繕闇€瑕佹坊鍔爒ite-plugin-vue2锛屽湪vite.config.js涓細鐢ㄥ埌锛歯pmivite-plugin-vue2-D鍙﹀锛屽鏋滀綘浣跨敤githooks锛屼綘鍙兘闇€瑕佹槑纭畨瑁厃orkie鎵嶈兘璁╀竴鍒囧儚浠ュ墠涓€鏍峰伐浣溿€俷pmiyorkie-Dscripts鎴戜滑灏唖erve涓殑vue-cli鑴氭湰鏇挎崲鎴恦ite涓搴旂殑鑴氭湰锛氬綋鐒朵綘涔熷彲浠ヤ繚鐣檚erve銆傚叾浠栫殑鑴氭湰锛屾瘮濡俠uild銆乯est銆乴int锛屽悗闈細鎻愬埌銆俰ndex.html缁х画灏唒ublic/index.html绉诲姩鍒伴」鐩殑鏍圭洰褰曘€?锔忊儯鎴戜滑杩樹細娣诲姞vite闇€瑕佺殑鍏ュ彛锛?scripttype="module"src="/src/main.js">2锔忊儯鏈€鍚庯紝鎴戜滑浠庢垜浠殑澶囬€夎矾寰勫浘鏍?%=BASE_URL%>寮€濮媐avicon.ico锛坴ite浼氬湪鎮ㄧ殑鍏叡鏂囦欢澶逛腑涓烘偍鎵惧埌鍥炬爣锛夈€?锔忊儯vite.config.js鎴戜滑闇€瑕佸皢涔嬪墠鐗堟湰鐨剉ue.config.js杞崲涓烘柊鐗堟湰鐨剉ite.config.js銆傝鎴戜滑浠庝互涓嬪嚑琛屽紑濮嬶細import{defineConfig}from'vite'import{createVuePlugin}from'vite-plugin-vue2'exportdefaultdefineConfig({plugins:[createVuePlugin(),],})杩佺Щ鏃讹紝鐢ㄤ簬寮€鍙戝皾璇曞敖鍙兘閫忔槑锛屼竴浜涢厤缃鍜屼箣鍓嶇殑淇濇寔涓€鑷达紝姣斿ports:],server:{port:8080,}})浣犱細鍦ㄨ繖閲屾壘鍒版墍鏈夊彲鑳界殑閰嶇疆閫夐」锛歨ttps://vitejs.dev/config/#co...'@'alias濡傛灉浣犲湪webpack涓娇鐢ㄥ埆鍚嶅鍏ユ枃浠堕偅涔堢幇鍦ㄤ綘闇€瑕侀噸鏂板垱寤哄畠锛歩mport{defineConfig}from'vite'import{createVuePlugin}from'vite-plugin-vue2'exportdefaultdefineConfig({[...],resolve:{alias:[{find:'@',鏇挎崲:path.resolve(__dirname,'src')}]},})".vue"瀵煎叆璺緞浣跨敤webpack鍙互蹇界暐.vue鏂囦欢鍚庣紑锛屼絾鍦╲ite涓笉琛岋紝闇€瑕佸甫涓娿€?/FromimportDotsLoaderfrom'@/components/DotsLoader'//toimportDotsLoaderfrom'@/components/DotsLoader.vue'routelazyloadingsimplified鍦≧oute澹版槑涓紝浣犲彲浠ュ畨鍏ㄥ湴鍒犻櫎webpackChunkName鍙兘鏈夌殑浠讳綍娉ㄩ噴锛屾瘮濡傝繖涓€琛岋細{path:'/links',name:'linksPage',component:()=>import(/*webpackChunkName:"links"*/'./views/LinksPage.vue'),},绠€鍖栦负锛歿path:'/links',name:'linksPage',component:()=>import'./views/LinksPage.vue'),},鎴戜笉鏄繖閲岀殑涓撳锛屼絾鏄鏋滀綘鐪熺殑鎯宠嚜瀹氫箟鍧楋紝鍙互閫氳繃瑕嗙洊鑱氬悎鐨刼utput.entryFileNames鏉ュ疄鐜般€傚彟璇峰弬闃卾itebuild.rollupOptions浠ヤ簡瑙ｅ浣曞皢鏌愪簺閫夐」鐩存帴浼犻€掔粰姹囨€汇€傜幆澧冨彉閲廣ite涓嶈瘑鍒玴rocess.env锛岃€屾槸锛歩mport.meta.env銆備緥濡傦細闇€瑕佹敞鎰忕殑鏄繀椤讳繚璇丯ODE_ENV=production锛岄渶瑕佸湪.env鏂囦欢鎴栬€卲roduction鐜鍙橀噺涓缃€傜湅瀹樻柟鏂囨。锛歨ttps://vitejs.dev/guide/env-...鑷充簬鑷畾涔夌幆澧冨彉閲忥紝鎴戜滑涓嶅啀闇€瑕佸儚浠ュ墠涓€鏍峰姞涓奦UE_APP鍓嶇紑锛岃€屾槸闇€瑕佷娇鐢╒ITE銆備换浣曚互VITE_xxx寮€澶寸殑鍙橀噺閮介渶瑕佸湪浠ｇ爜涓彁渚涖€傛瘮濡?env.local鏂囦欢涓殑涓€涓彉閲忥細VITE_APP_BACKEND_URL=http://localhost:3001testcase鐜板湪鎴戜滑涓嶈兘鍐嶄娇鐢╲ue-cli-servicetest:unit浜嗭紝鎴戜滑閲嶆柊閰嶇疆涓€涓嬨€傞鍏堬紝浣犲彲浠ユ洿鏂版祴璇曡剼鏈細濡傛灉浣犵殑babel.config.js鏂囦欢鍖呭惈绫讳技鍐呭锛歱resets:['@vue/cli-plugin-babel/preset']锛屼綘闇€瑕佸皢鍏舵浛鎹负锛歱resets:['@babel/preset-env']鎴戠殑import.meta.env璇彞涔熸湁閿欒銆備笉骞哥殑鏄紝娌℃湁寮€绠卞嵆鐢ㄧ殑鍗曞厓娴嬭瘯璁剧疆锛屼絾杩欐潯璇勮瀵规垜鏈夊府鍔╋細https://github.com/vitejs/vit...鎴戠殑babel.config.js鏂囦欢鐜板湪鐪嬭捣鏉ュ儚锛歮odule.exports={presets:['@babel/preset-env'],//璁㎎est涓嶈'import.meta.xxx'鐑︽壈plugins:[function(){return{visitor:{MetaProperty(path){path.replaceWithSourceString('process')},},}},],}鎴栬€咃紝鎮ㄥ彲浠ヤ娇鐢ㄦBabel鎻掍欢锛岃鎻掍欢杩樺湪娴嬭瘯涓慨澶嶄簡import.meta锛歨ttps://github.com/javiertury...鍦ㄨ繖閲岋紝鎮ㄥ彲浠ユ寜鐓у叧浜巚ite鍜孞est鐨勪竴浜涜璁猴細https://github.com/vitejs/vit..."regeneratorRuntime"error49|瀵煎嚭甯搁噺鎿嶄綔={>50|init:async({commit},routeContext)=>{ReferenceError:regeneratorRuntimeisnotdefinedregenerator-runtimeinstalledandreferencedinmysetupTests.js,浼间箮宸茬粡瑙ｅ喅浜嗚繖涓棶棰樸€俷pmiregenerator-runtime-D'jest.config.js':module.exports={moduleFileExtensions:['js','json',//鍛婅瘔Jest澶勭悊`*.vue`鏂囦欢'vue',],transform:{//浣跨敤`vue-jest`澶勭悊`*.vue`鏂囦欢'.*\\.(vue)$':'vue-jest',//浣跨敤`babel-jest`澶勭悊`*.js`鏂囦欢'.*\\.(js)$':'babel-jest',},setupFiles:['./setupTests'],moduleNameMapper:{'^@/(.*)$':'/src/$1',},collectCoverage:false,};鐒跺悗鏄垜鐨勨€渟etupTests.js鈥濈殑绗竴琛岋細import'regenerator-runtime/runtime';Lint鍙渶瑕佹浛鎹袱涓猯int鐩稿叧鐨勮剼鏈細publish鍦ㄦ绀轰緥涓紝鎴戠殑搴旂敤绋嬪簭鐢盨3/CloudFront鎻愪緵鏈嶅姟銆傛垜鏈変袱涓敓浜х幆澧冿細preprod鍜宲rod銆傛墍浠ワ紝鎴戞湁涓や釜.env鏂囦欢锛?env.preprod.env.prod浣跨敤rollup鏋勫缓鏃讹紝vite浼氭牴鎹皟鐢ㄦ瀯寤鸿剼鏈椂浣跨敤鐨勬ā寮忓皢鎴戜滑鐨勭幆澧冨彉閲忔浛鎹负瀹冧滑鐨勫€笺€傝繖涓巚ue-cli闈炲父鐩镐技锛屽洜姝ゆ洿鏂版垜浠殑package.json鑴氭湰寰堢畝鍗曪細鏈夊叧姝ょ殑鏇村璇︾粏淇℃伅锛岃鍙傝锛歨ttps://vitejs.dev/guide/env-銆?.Tips杩樺繀椤昏鐩栤€渧ite.config.js鈥濅腑鏈€澶у寘鐨勫ぇ灏忥細],build:{chunkSizeWarningLimit:700,//Defaultis500},})VisualizationBundle"build:report":"vue-cli-servicebuild--report",鎴戜娇鐢╮ollup-plugin-visualizer鏉ュ畬鎴愯繖涓姛鑳姐€傚鍏ヨ繖涓彃浠跺苟鍦ㄦ垜鐨剉ite.config.js涓紩鐢ㄥ畠锛?[createVuePlugin(),visualizer(),],[...],})褰撴墦寮€鏂扮敓鎴愮殑stats.html鏂囦欢鏃讹紝杩欐槸鎴戠殑缁撴灉锛氳繖鍜屾垜浠父鐢ㄧ殑webpack-bundle-analyzer鏄被浼肩殑銆備娇鐢╲ite鐨勪竴浜涙寚鏍囧惎鍔ㄦ椂闂达細~4绉掞紙鍗充娇椤圭洰涓嶆柇澧為暱锛屽畠涔熷簲璇ヤ繚鎸佷笉鍙橉煓岋級浣跨敤vue-cli/webpack锛氬ぇ绾?0绉掞紙闅忕潃鎴戜滑鍚戦」鐩坊鍔犳洿澶氭枃浠讹紝瀹冧細涓嶆柇澧炲姞馃槩锛塰ot鏇存柊vite锛氱畝鍗曟洿鏀癸紙HTML鏍囪銆丆SS绫?..锛夛細绔嬪嵆鐢熸晥銆傚鏉傜殑鍙樺寲锛堥噸鍛藉悕JS鍑芥暟锛屾坊鍔犵粍浠?..锛夛細涓嶇‘瀹氾紝鏈夋椂鍊欐垜鏇村枩娆㈠埛鏂拌嚜宸便€倂ue-cli/webpack锛氱畝鍗曟洿鏀癸細~4sec馃槙鏇村鏉傜殑鏇存敼锛氭垜浠庝笉绛夊緟锛岃€屾槸鎵嬪姩鍒锋柊椤甸潰銆傜涓€娆￠〉闈㈣姹倂ite鍚姩鏃讹紝绗竴娆¤姹備竴涓鏉傜殑椤甸潰锛屾湁寰堝缁勪欢锛屾垜浠湪ChromeDevTools涓煡鐪嬬綉缁滈€夐」鍗★細vite:~1430JS鏂囦欢璇锋眰锛屽湪~11绉掑唴瀹屾垚馃槦vue-cli/webpack:绾?3涓狫S鏂囦欢璇锋眰锛岀害6绉掑畬鎴愷煈嶅湪杩欐柟闈㈠彲浠ラ噰鍙栦竴浜涗紭鍖栨柟妗堬紝姣斿缁勪欢鐨勬噿鍔犺浇銆傜粨璁烘€荤殑鏉ヨ锛屽埌鐩墠涓烘锛屼娇鐢╲ite鐨勫紑鍙戜綋楠岄潪甯稿ソ锛岎煂燄煂燄煂燄煂燄煂熷浜庝粛鍦ㄤ娇鐢╳ebpack鐨勯」鐩紝浜嬫儏鍙兘浼氬彉寰楁洿鍔犺壈闅俱€傚ソ浜嗭紝鎵€鏈夌殑鍐呭灏辫繖浜涗簡锛屽笇鏈涘澶у鏈夋墍甯姪銆傛湰浜烘墠鍗庢í婧紝瀛﹂棶鏈夐檺锛屽鏈夐敊璇杩庢寚姝ｃ€傝阿璋€傛渶鍚庯紝濡傛灉瑙夊緱鍐呭鏈夊府鍔╋紝鍙互鍏虫敞鎴戠殑鍏紬鍙凤紝闅忔椂浜嗚В鏈€鏂板姩鎬侊紝鍏卞悓瀛︿範锛?/p>