項目開發中到底能不能使用vite👀

前言

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

原來的項目架構:vue2 + vue-cli2 + vant

升級後的項目架構: vue3 + vite1.0 + vant

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

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

vite升級到了2.0

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

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

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

我在使用vite中遇到的槽點

不少人其實並無拿vite用於正式的項目開發中,僅僅是用vite運行下vue3跑跑demo。由於如今基於webpack構建的腳手架足夠穩定及好用。

vite的優勢不言而喻,我的認爲之後頗有可能替代webpack,那vite在正式項目開發中表現如何呢?

下面就我本身在vite使用中碰見的槽點而言,和你們分享下現階段vite使用上的一些不爽之處,若有錯誤,歡迎留言評論。

require不能使用

在使用vue-cli的時候,出於業務須要咱們可能須要這樣引用圖片

{
  imgUrl:require("../assets/images/bg.png")
}
複製代碼

而後在template中使用

<img :src="imgUrl" alt="">
複製代碼

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

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

這種報錯天然能夠理解,由於vite使用的是瀏覽器自帶的module去解析js的,而require語法是node語法,天然報錯,可是vite並無給出合理的解決方案。

最後只好是把須要require引入的圖片放到public文件夾下😟,這樣打包先後路徑都不會被處理,能夠保證路徑的正確性

全局css文件沒法配置

在vue-cli中咱們可使用css預處理器來提取公用css變量及css函數並放在一個文件中,而後再vue.config.js中以下配置

module.exports = {
  css: {
    // 不用在每個頁面都進行引入樣式，就能直接引用。
    loaderOptions: {
      sass: {
        prependData: `@import '@/assets/scss/variables.scss';`
      }
    }
  }
}
複製代碼

這樣咱們就能夠在任何sass文件中均可以使用到sass變量了

但在vite中卻沒有提供這樣的配置🙄,官方也提供瞭如何配置css變量

export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  }
}
複製代碼

可是,若是我想把全部的變量及函數抽離到一個文件中引入,像如下這樣:

export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: "@import '../assets/scss/_base.scss';" // 無效
      }
    }
  }
}
複製代碼

發現並不起做用

去vite的issues中發現有人也說起了相似的問題

尤雨溪的回答也很簡單

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

錯誤提示不友好

相比於vue-cli,vite的錯誤提示並非十分友好,有些時候頁面也不報錯也不出來任何東西。遇到這種狀況時,咱們能夠從新啓動框架試試,還有就是在引用.vue文件時,後綴名不能省略。

推薦使用vite

vite自己已經足夠完善,可能在一些工程化及社區建設方面比webpack差了一些,但整體體驗下來,不少地方都是能夠無縫遷移的,速度確實比webpack快,打出來的包也比webpack小,下面是一樣的代碼打出來的包體積的對比:

對vue3的見解

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

代碼量增多

能夠感受到,在使用vue3時一切都變成的函數,且在使用vuex和vue-router也大有不一樣

import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
  }
複製代碼

無形之中確實增長了些代碼量

代碼變的更靈活

vue3最大的更新就是composition-api,全新的語法及代碼結構,從api要作的事來說確實是增長的代碼的靈活性,代碼的可組織性確實變高的不少。

可是,在現實開發中,咱們極可能一不當心就寫出setup中有不少代碼的狀況,你可能也會遇到以下場景:

同事小張:  能夠把代碼抽離出來,放到不一樣的文件夾,便於維護啊!

我:  抽離出來就又會多出來幾個js文件,對我來講並不便於維護啊!

同事小張: 你懂啥,我看你就是懶吧!

我:  是啊,時間緊任務重,哪有時間整理啊!
複製代碼

只能說理想和現實老是有差異的,任何東西都是一把雙刃劍,你以爲呢?

最後

若有收穫,請慷慨點贊呦😚