前言
就在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文件,对我来说并不便于保护啊!共事小张: 你懂啥,我看你就是懒吧!我: 是啊,工夫紧工作重,哪有工夫整顿啊!复制代码只能说现实和事实总是有差异的,任何货色都是一把双刃剑,你感觉呢?
作者：刘小灰