鐨勫墠瑷€宸茬粡2202浜嗭紝vite涔熺畻鏄亶鍦板紑鑺憋紝杩欎袱骞村叧娉ㄥ害涔熸瘮杈冮珮銆傚師鍥犳槸webpack宸茬粡鑻︿簡寰堜箙锛涙帴涓嬫潵灏辨槸椤圭洰鐨勫悇绉嶆參锛坧s锛氳窇椤圭洰鐨勬椂鍊欏彲浠ュ幓鑼舵按闂存嬁鏉按鍥炴潵鍠濅竴浼氬効馃槶馃槶馃槶锛夎嚦浜庡師鍥狅紝鎬讳箣锛屽氨鏄痺ebpack闇€瑕佺储寮曟暣涓」鐩殑鏂囦欢锛岀紪璇戞垚涓€涓垨澶氫釜鍗曠嫭鐨刯s鏂囦欢锛泇ite鍦ㄦ祻瑙堝櫒璇锋眰鐩稿簲鐨刄RL鏃舵彁渚涚浉搴旂殑鏂囦欢銆傛洿璇︾粏鐨勫彲浠ョ湅涓€涓媣ite鐨勮嚜鑽愩€備笅闈㈠紑濮嬭繘鍏ユ棰?.淇敼椤圭洰閰嶇疆缁堢杈撳叆npmi-Dviteinstallvite淇敼pageage.json涓殑鐩稿叧鍛戒护"dev":"vite","build":"vitebuild","serve":"vitepreview","lint":"eslint--ext.js,.vue--ignore-path.gitignore--fixsrc"2銆傚湪鏍圭洰褰曞垱寤轰竴涓獀ite.config.js鏂囦欢import{defineConfig}from'vite'import{createVuePlugin}from'vite-plugin-vue2'importpathfrom'path'exportdefaultdefineConfig({base:'./',plugins:[createVuePlugin()],server:{open:true//鍚姩鍚庤嚜鍔ㄦ墦寮€娴忚鍣▆,resolve:{alias:[{find:'@',replacement:path.resolve(__dirname,'src')}//鍙互杩欐牱瀵煎叆.vue鏂囦欢锛屼絾鏄浘鐗囦細404{find:'/@',replacement:'src'},//瑙ｅ喅鍥剧墖浣跨敤alias404,@瀛楃闇€瑕佸湪鏁板瓧鍓嶅姞'/'锛屼笉瑕佷娇鐢ㄧ粷瀵硅矾寰刔}})3.淇敼鐜鍙橀噺涓嶆敮鎸佸師鏉ョ殑process.env璁块棶vite涓殑鐜鍙橀噺銆傞渶瑕佹敼鎴恑mport.meta.env鎵嶈兘璁块棶锛屽湪.env鏂囦欢涓殑鍙橀噺涔熼渶瑕佹妸鍓嶇紑鏀规垚VITE_锛坧s锛氫篃鍙互鍦╲ite.config涓缃甧nvPrefix鏉ヨ嚜瀹氫箟鍓嶇紑锛夋瘮濡備互涓嬩唬鐮侊細VITE_APP_API_URL=/apiVITE_TITLE=title4銆傚湪vue-cli涓厤缃叏灞€css鍙橀噺鏄€熷姪style-resources-loader瀹炵幇鐨勫叏灞€鍙橀噺锛屽湪vite涓彲浠ョ洿鎺ラ€氳繃css.preprocessorOptions杩涜閰嶇疆css:{preprocessorOptions:{less:{additionalData:`@import'./src/assets/style/variables.less';`}}}5.淇敼index.html鏂囦欢鍏堝皢public鏂囦欢澶逛笅鐨刬ndex.html绉诲姩鍒版牴鐩綍涓嬶紝瀵煎叆src鐩綍涓嬬殑main.js鏂囦欢intoindex.html杩樻湁涓€涓槸vite榛樿涓嶆敮鎸乪js鐨勮娉曪紙ps锛氬叾瀹炴垜璇曡繃鐢╲ite-plugin-html鎻掍欢锛屼絾鏄惎鍔ㄤ細鎶ラ敊馃槢馃槢锛夛紝鍦ㄥ綋鍓嶉」鐩腑娌℃湁瀹為檯鎰忎箟锛屾墍浠ヤ篃娌℃湁澶ф儕灏忔€紝鏀规垚鍘熸潵鐨勫啓娉?
