vite替换webpack项目

最新推荐文章于 2023-06-22 21:44:22 发布
最新推荐文章于 2023-06-22 21:44:22 发布
阅读量946 收藏
点赞数
分类专栏： vue 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/drunk2/article/details/122626383
版权

按需引入

官网步骤自动按需引入，ElMessage没有样式
解决方案：
在main.ts中引入element-plus样式
注：看自己引入包的位置nodemodules

import 'element-plus/lib/theme-chalk/index.css';

el-image图片路径FAILE

这个还真不知道是因为什么，后续补充
解决方案
将el-image标签替换为image标签，图片路径可以取别名或者用绝对路径

绝美焦栖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vite 入门以及从 webpack 切换到 Vite 遇到的问题总结，web网页开发工具
2401_84091742的博客
04-04 798
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-80WLOyuN-1712213272316)][外链图片转存中…(img-GQab9LNU-1712213272316)]
electron-vue-vite-webpack:Electron、vue3、vite2、webpack5、ant-design-vue2 整合
05-17
电子vue-vite-webpack Electron + vue3 + vite2 + webpack5 + ant-design-vue2 如何和为什么 Vite是未来的脚手架 在开发期间使用“拜访”以保持快速启动的优势 使用“ webpack”解决包装期间的包装问题 命令 npm ...
wp2vite:一键让webpack项目支持vite
04-01
English | wp2vite 一个前端项目自动转换工具，您可以让您的webpack项目支持更轻松。 wp2vite不会删除您的webpack配置，但会将vite配置注入到您的项目中以支持vite。 开发速度比webpack快80％，构建速度比webpack快50％。 React 无论是否执行弹出，都支持由react项目 支持创建的react项目 支持创建的react项目 Vue 支持由创建的vue项目，无论是否包含vue.config.js 其他 支持由其他项目 安装 npm install -g wp2vite 采用 cd yourwork/your_project // go to your project catalog wp2vite or wp2vite init npm install // install dependencies npm run dev /
使用 vite 代替 webpack 搭建 react 前端开发环境
mjzhang1993的博客
01-26 5273
说明 在大型前端项目中，我们一般会使用 webpack、Rollup 等工具进行模块整合，但是庞大的代码量会使得我们在开发阶段花费更多的时间在（代码改动 --> 页面渲染）这个阶段，即使使用 HMR 这个问题也没有完全的解决，项目代码量达到一定规模，积少成多，HMR 带来的效率提升会逐渐不够 vite 可以解决的问题 快速启动本地开发服务器 代码更新快速显示在浏览器页面中 在开发阶段 vite 会使用 esbuild ,同时 基于 原生 ES 模块实现 高效的 HMR 在生产阶段 vit
如何创建基于webpack的vue项目和基于vite的vue项目及将现有vue项目变更为基于vite项目
Hit_By_Apple的博客
10-16 490
新手创建vue项目
vite和webpack
weixin_52066534的博客
10-27 2990
vite和webpack
聊聊我是怎么样用vite替换webpack的
qq_26314225的博客
06-24 3314
随着项目功能越来越多，代码越来越复杂，随之而来的就是项目的各种慢（ps:跑个项目的时间都能去茶水间打杯水回来喝一会儿了 😭😭😭）
vite的使用，开发vue项目时webpack的初始化和配置；babel/preset-env的作用
m0_63835647的博客
06-22 1319
vite的使用，开发vue项目时webpack的初始化和配置；babel/preset-env的作用
vue2+vite+vue-cli5 实现vite开发webpack打包
JokerSoulClub的博客
09-30 3505
主要是因为即想要得到vite的高效开发模式（免编译）但是最后又想要兼容到IE9（ps，vite自带插件最多IE11而且打包出两份代码）
WEBPACK、VITE 常用配置（对照）及迁移指南
集成显卡的开源主页 https://github.com/0604hx
05-15 2827
webpack 是新一代构建工具里面的老大哥了，从 2013 年发布已经持续升级 10 年，形成完备的生态环境。vite 则是下一代前端开发与构建工具，2019年发布，最新发布版本 4.3.3（截至 23年4月底），性能能继续提升👍
【webpack转vite】操作流程与问题
cxk_ctrl的博客
07-07 4459
webpack转vite流程及常见问题
vue2项目将webpack迁移为vite，并使用svg, 完美解决所有bug
zxo_apple的博客
09-28 9471
背景 1. vite是跟随vue3诞生的一个工具，它让我们在开发环境中的效率大大提升，其原因是因为它省去了我们在开发环境中的打包过程（因为我们在实际开发环境中是不需要打包的，但是webpack却会去执行打包，大大降低了开发效率），将ES 模块源码直接传输给浏览器，浏览器使用自带的<script module> 进行解析支持 2. 但是vite其实是基于vue3进行开发的，很多时候我们的老项目使用的都是vue2版本的，这个时候想要使用vite应该怎么做呢 过程 1. 通过vite创建vue项目 n
基于 vite 和 webpack 5，构建、安装、切换博客园皮肤
07-13
基于 vite 和 webpack 5，构建、安装、切换博客园皮肤。
vite搭建vue3项目
09-06
vite搭建vue3项目
若依vue3,基于webpack(非vite版本)
最新发布
01-02
若依vue3,基于webpack(非vite版本)
新朝旧将 vite和webpack煮酒论英雄
zhuanzhuantech的博客
06-29 292
我们见证了 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。
vue3.0 使用企图代替webpack的vite创建Vue3.0项目
weixin_46095200的博客
11-19 941
第一步进行全局安装vite npm install -g create-vite-app 第二步：通过命令进行创建 create-viet-app demo 第三步：cd demo，进行cnpm i 安装依赖 然后npm run dev 或者yarn run 就好了， vue3.0兼容vue2.0但是个人感觉把所有的变量都放setup 里面会不会逻辑很乱。 慢慢学吧 ...
vue2项目vite替换webpack
weixin_45479904的博客
10-25 433
vue2项目vite替换webpack
前端工程化以及构建工具webpack,vite的使用
y516369的博客
08-05 555
前端工程化与webpack
vite与webpack区别
07-14
Vite和Webpack是两个常用的前端构建工具，它们有一些区别： 1. 构建速度：Vite在开发环境下使用了ES模块的原生导入方式，通过ES模块的特性实现了快速的冷启动和热模块替换，因此在开发环境下具有更快的构建速度。而Webpack在每次修改代码后都需要重新构建整个应用，相对来说更慢一些。 2. 构建方式：Vite采用了基于原生ES模块的开发方式，通过浏览器原生支持的模块加载功能，可以直接在浏览器中运行源码，不需要打包合并成一个文件。而Webpack则是将所有资源打包成一个或多个文件，以便在浏览器中加载和执行。 3. 插件生态：Webpack拥有非常丰富的插件生态系统，并且支持各种自定义配置，可以用于更复杂的项目需求。而Vite在初期相对较新，插件生态相对较少，但也在逐渐发展壮大。 4. 生产环境构建：虽然Vite在开发环境下表现出色，但在生产环境下，Vite会将代码打包成传统的、优化过的文件，与Webpack类似。因此，在生产环境下，两者的构建速度相差不大。 综上所述，Vite在开发环境下具有更快的构建速度，并采用了基于原生ES模块的开发方式，而Webpack则更加成熟、稳定，拥有更丰富的插件生态和自定义配置能力。选择使用哪个工具，可以根据项目需求和个人偏好来决定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值