技术分享!项目开发中到底能不能使用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
的时候,出于业务需要我们可能需要这样引用图片

如何图片的路径是动态的,我们也需要使用require
引用,从而让框架在打包的时候分析出正确的路径
但这种图片引用方案在vite
中并不能用,浏览器中会报require
相关错误

这种报错自然可以理解,因为vite
使用的是浏览器自带的module
去解析js
的,而require
语法是node
语法,自然报错,但是vite
并没有给出合理的解决方案。
最后只好是把需要require
引入的图片放到public
文件夹下😟,这样打包前后路径都不会被处理,可以保证路径的正确性
全局css文件无法配置
在vue-cli
中我们可以使用css预处理器
来提取公用css变量及css函数并放在一个文件中,然后再vue.config.js
中如下配置

发现并不起作用
去vite
的issues
中发现有人也提及了类似的问题

尤雨溪的回答也很简单

意思就是使用poctss-import
来配置全局css,但是并没有说如何配置(有知道的大佬可以再下面评论哦)
错误提示不友好
相比于vue-cli
,vite
的错误提示并不是十分友好,有些时候页面也不报错也不出来任何东西。遇到这种情况时,我们可以重新启动框架试试,还有就是在引用.vue
文件时,后缀名不能省略。
推荐使用vite
vite
本身已经足够完善,可能在一些工程化及社区建设方面比webpack
差了一些,但总体体验下来,很多地方都是可以无缝迁移的,速度确实比webpack
快,打出来的包也比webpack
小,下面是同样的代码打出来的包体积的对比:

对vue3的看法
vue3
内部的优化就不讨论了,我们说下开发体验
代码量增多
可以感觉到,在使用vue3
时一切都变成的函数,且在使用vuex
和vue-router
也大有不同

代码变的更灵活
vue3最大的更新就是composition-api,全新的语法及代码结构,从api要做的事来讲确实是增加的代码的灵活性,代码的可组织性确实变高的很多。
但是,在现实开发中,我们很可能一不小心就写出setup
中有很多代码的情况,你可能也会遇到如下场景:

了解更多,请点击:https://www.bilibili.com/video/BV1NK4y1j76E
作者:刘小灰
链接:https://juejin.cn/post/6913812233382264846
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。