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

相关推荐
神奇的代码在哪里3 分钟前
【单机离线版】大学考试题库复习工具:前端离线Excel解析 + localStorage持久化 + Playwright
前端·html·ai编程·题库复习·刷题软件·大学考试
daols887 分钟前
vxe-table 实现数据分组统计与表尾合计
前端·javascript·vue.js·vxe-table
向日的葵0069 分钟前
Vue 函数定义、事件绑定与列表渲染精讲
前端·javascript·vue.js
神秘代码行者12 分钟前
pnpm zip命令详解
前端·npm·pnpm
Xpower 1722 分钟前
Codex 桌面端更新后 Chrome 插件和 Computer Use 不可用,怎么排查和修复
前端·人工智能·chrome·python·学习
lolo大魔王1 小时前
Gin 框架响应格式与 HTML 模板渲染完整实战教程
前端·html·gin
wgc2k2 小时前
Node.js游戏服务器项目移植-2: 用TypeScript还是Javascript
服务器·游戏·node.js
llz_1123 小时前
web-第二次课后作业
前端·后端·web
vipbic8 小时前
别再把“做个H5”挂嘴边了:这个词,官方压根就没有定义过
前端
ZC跨境爬虫10 小时前
跟着 MDN 学CSS day_39:(Flexbox 弹性盒子核心机制)
前端·css·ui·html·tensorflow