将项目从 Webpack 到 Vite 迁移的步骤

迁移从 Webpack 到 Vite 的步骤可以概括为以下几点:

  1. 使用Vite新建项目 :在终端中运行下述命令
    npm create vite@latest alarm_vite
    cd alarm_vite
    npm install
  2. 更新代码 :将原项目中的src文件夹下的代码迁移到alarm_vitesrc中。
  3. 修改 Vite 配置文件 :修改 vite.config.js,主要包括element引入方式、svg使用插件、文件输入输出方式、css的加载配置。
  4. 调整文件结构:根据 Vite 的要求调整项目结构,确保入口文件(index.html、main.ts、APP.vue)和静态资源路径正确。
  5. 安装依赖npm run dev启动项目后,根据报错提示安装项目所需的依赖。
  6. 测试和调试:启动开发服务器,测试项目是否正常运行,并根据报错进行调试。

【注】 :Vite不支持使用require相关方法导入模块和图片等,所以在迁移时要注意修改为import导入资源,具体可以参考该blog。

https://blog.csdn.net/sinat_31213021/article/details/136401928#:\~:text=首先, Vite 中没有,require 相关方法,因为它默认支持 ESM 方式加载模块!

相关推荐
无尽的沉默6 分钟前
Thymeleaf 表达式
java·开发语言·前端
无尽的沉默8 分钟前
Spring Boot 整合 Thymeleaf 模板引擎
java·前端·spring boot
We་ct14 分钟前
从输入URL到页面显示的完整技术流程
前端·edge·edge浏览器
先做个垃圾出来………31 分钟前
DeepDiff差异语义化特性
服务器·前端
蓝帆傲亦1 小时前
前端常用可视化图表组件大全
前端
CappuccinoRose2 小时前
HTML语法学习文档(九)
前端·学习·架构·html5
NEXT062 小时前
BFC布局
前端·css·面试
菜鸟小芯2 小时前
【GLM-5 陪练式前端新手入门】第四篇:卡片布局 —— 让个人主页内容更有层次
前端·人工智能
Hello.Reader2 小时前
Leptos + Tauri 2 前端配置Trunk + SSG + 移动端热重载一次打通(Leptos 0.6 口径)
前端
岱宗夫up2 小时前
【前端基础】HTML + CSS + JavaScript 进阶(一)
开发语言·前端·javascript·css·html