将项目从 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 方式加载模块!

相关推荐
代码匠心15 小时前
AI 自动编程:一句话设计高颜值博客
前端·ai·ai编程·claude
_AaronWong16 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode16 小时前
I/O 多路复用:从浏览器到 Linux 内核
前端
用户54330814419416 小时前
AI 时代,前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo17 小时前
Flutter 版本的 material_ui 已经上架 pub.dev 啦!快来抢先体验吧。
前端
恋猫de小郭17 小时前
AI 可以让 WIFI 实现监控室内人体位置和姿态,无需摄像头?
前端·人工智能·ai编程
哀木17 小时前
给自己整一个 claude code,解锁编程新姿势
前端
程序员鱼皮17 小时前
GitHub 关注突破 2w,我总结了 10 个涨星涨粉技巧!
前端·后端·github
UrbanJazzerati17 小时前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉17 小时前
5分钟上手LangChain.js:用DeepSeek给你的App加上AI能力
前端·人工智能·langchain