webpack3.6+vue2 转 vite+vue2 各种峰回路转

1 篇文章 0 订阅
首先如果是小项目打包和启动时间时间不是特特特特别长的就直接改装vue3吧,目前这个项目是页面经过了无数人的摧残,各种写法技术,真的是八仙过海,各显神通,启动时间一分钟左右,打包时间超过了5分钟。。搞得我是欲仙欲死,本来一直都是能跑起来就行的心态,这不是有点时间了。这个问题又开始在我的脑袋里面不断的蹦跶,那就来吧,不是你死就是你死。
第一步:先创建个vite的项目,这是个废话  ,能看到我的这个文章的基本都已经创建好了。如果没有那就去搜下怎么创建vite+vue2很多。万里长征第一步,你已经在作死的道路上越走越远,那就话不多说了。上干货。
第二步:webpack是支持require,所以很多webpack的项目中或多或少的都用到了require,那先让vite支持require。安装  vite-plugin-require
npm install vite-plugin-require
 vite.config里面搞起来
import requirePlugin from 'vite-plugin-require'
plugins:[
     requirePlugin(),
]
 第三步:vite里面没有组件页面没有‘.vue’是不行的,这个真是一个大坑,但是你又没办法,一个个改,心里千万个羊驼飘过~~~,这是事吗 ,娶你妹的。。。
嗯改完了,很不错。
第四步:图片加载。你就算支持了require,但是在img的标签上使用还是会报错,这是事吗,干就完了,查了半天的资料,刨了不少祖坟,我被狠狠蹂躏了几次以后,
Vue.prototype.getAssetFile = (path)=>{
  return new URL(`./assets/image/${path}`, import.meta.url).href
}
这个是最终的方法,天知道这行代码都经历了什么。 
那到现在项目已经正式跑起来了,貌似很轻松,只有真正经历过的人才能知道它的风景有多美。我是ba哥,有什么问题可以随便问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值