專案開發中到底能不能使用vite 乾貨分享

就在2020的最後一天,我把公司的乙個小專案公升級到了vue3,專案很簡單,核心功能就是乙個h5拼圖(公司內部專案,不便給出鏈結)

原來的專案架構:vue2+vue-cli2+vant

公升級後的專案架構:vue3+vite1.0+vant

一天時間重構上線,在元旦節中使用一切正常?

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

元旦節的時候,尤雨溪送給了我們乙個跨年禮物,發布了vite的2.0版本

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

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

很多人其實並沒有拿vite用於正式的專案開發中,僅僅是用vite執行下vue3跑跑demo。因為現在基於webpack構建的腳手架足夠穩定及好用。

vite的優點不言而喻,個人認為以後很有可能替代webpack,那vite在正式專案開發中表現如何呢?

在使用vue-cli的時候,出於業務需要我們可能需要這樣引用

複製**

然後在template中使用

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

但這種引用方案在vite中並不能用,瀏覽器中會報require相關錯誤

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

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

在vue-cli中我們可以使用css預處理器來提取公用css變數及css函式並放在乙個檔案中,然後再vue.config.js中如下配置

module.exports = }}}
複製**

這樣我們就可以在任何sass檔案中都可以使用到sass變數了

但在vite中卻沒有提供這樣的配置?,官方也提供了如何配置css變數

export default }}}
複製**

但是，如果我想把所有的變數及函式抽離到乙個檔案中引入,像以下這樣:

export default }}}
複製**

發現並不起作用

去vite的issues中發現有人也提及了類似的問題

尤雨溪的回答也很簡單

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

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

vue3內部的優化就不討論了,我們說下開發體驗

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

import  from "vue-router";
import  from "vuex";
export default 
複製**

無形之中確實增加了些**量

vue3最大的更新就是composition-api,全新的語法及**結構,從api要做的事來講確實是增加的**的靈活性,**的可組織性確實變高的很多。

但是,在現實開發中,我們很可能一不小心就寫出setup中有很多**的情況,你可能也會遇到如下場景:

同事小張: 可以把**抽離出來,放到不同的資料夾,便於維護啊! 我: 抽離出來就又會多出來幾個js檔案,對我來說並不便於維護啊! 同事小張: 你懂啥,我看你就是懶吧! 我: 是啊,時間緊任務重,哪有時間整理啊! 複製**

只能說理想和現實總是有差別的,任何東西都是一把雙刃劍,你覺得呢?