项目开发中到底能不能使用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文件,对我来讲并不便于维护啊!

同事小张: 你懂啥,我看你就是懒吧!

我:  是啊,时间紧任务重,哪有时间整理啊!
复制代码

只能说理想和现实老是有差异的,任何东西都是一把双刃剑,你以为呢?

最后

若有收获,请慷慨点赞呦😚