前言

就在2020的最后一天,我把公司的一個小項目升級到了vue3,項目很簡單,核心功能就是一個H5拼圖(公司內(nèi)部項目,不便給出鏈接)

原來的項目架構(gòu):vue2 + vue-cli2 + vant

升級后的項目架構(gòu): vue3 + vite1.0 + vant

一天時間重構(gòu)上線,在元旦節(jié)中使用一切正常 ??

下面我們不卑不亢,來探討下vue3及vite1.0

vite升級到了2.0

元旦節(jié)的時候,尤雨溪送給了我們一個跨年禮物,發(fā)布了vite的2.0版本

是不是很震驚!1.0的還沒用呢,2.0的就出來了?

不要慌,在我看來2.0最主要的更新點就是vite和vue解耦,還有就是出了vite官網(wǎng)文檔,雖然是英文版,但耐心看下來,也可以看懂個七七八八

我在使用vite中遇到的槽點

很多人其實并沒有拿vite用于正式的項目開發(fā)中,僅僅是用vite運行下vue3跑跑demo。因為現(xiàn)在基于webpack構(gòu)建的腳手架足夠穩(wěn)定及好用。

vite的優(yōu)點不言而喻,個人認(rèn)為以后很有可能替代webpack,那vite在正式項目開發(fā)中表現(xiàn)如何呢?

下面就我自己在vite使用中遇見的槽點而言,和大家分享下現(xiàn)階段vite使用上的一些不爽之處,如有錯誤,歡迎留言評論。

require不能使用

在使用vue-cli的時候,出于業(yè)務(wù)需要我們可能需要這樣引用圖片

如何圖片的路徑是動態(tài)的,我們也需要使用require引用,從而讓框架在打包的時候分析出正確的路徑

但這種圖片引用方案在vite中并不能用,瀏覽器中會報require相關(guān)錯誤

這種報錯自然可以理解,因為vite使用的是瀏覽器自帶的module去解析js的,而require語法是node語法,自然報錯,但是vite并沒有給出合理的解決方案。

最后只好是把需要require引入的圖片放到public文件夾下??,這樣打包前后路徑都不會被處理,可以保證路徑的正確性

全局css文件無法配置

在vue-cli中我們可以使用css預(yù)處理器來提取公用css變量及css函數(shù)并放在一個文件中,然后再vue.config.js中如下配置

發(fā)現(xiàn)并不起作用

去vite的issues中發(fā)現(xiàn)有人也提及了類似的問題

尤雨溪的回答也很簡單

意思就是使用poctss-import來配置全局css,但是并沒有說如何配置(有知道的大佬可以再下面評論哦)

錯誤提示不友好

相比于vue-cli,vite的錯誤提示并不是十分友好,有些時候頁面也不報錯也不出來任何東西。遇到這種情況時,我們可以重新啟動框架試試,還有就是在引用.vue文件時,后綴名不能省略。

推薦使用vite

vite本身已經(jīng)足夠完善,可能在一些工程化及社區(qū)建設(shè)方面比webpack差了一些,但總體體驗下來,很多地方都是可以無縫遷移的,速度確實比webpack快,打出來的包也比webpack小,下面是同樣的代碼打出來的包體積的對比:

對vue3的看法

vue3內(nèi)部的優(yōu)化就不討論了,我們說下開發(fā)體驗

代碼量增多

可以感覺到,在使用vue3時一切都變成的函數(shù),且在使用vuex和vue-router也大有不同

代碼變的更靈活

vue3最大的更新就是composition-api,全新的語法及代碼結(jié)構(gòu),從api要做的事來講確實是增加的代碼的靈活性,代碼的可組織性確實變高的很多。

但是,在現(xiàn)實開發(fā)中,我們很可能一不小心就寫出setup中有很多代碼的情況,你可能也會遇到如下場景:

了解更多，請點擊：https://www.bilibili.com/video/BV1NK4y1j76E

作者：劉小灰
鏈接：https://juejin.cn/post/6913812233382264846
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。