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

相关推荐
宇图SHARE2 分钟前
别再用 Python 写 Agent 前端了!Vue3 + NestJS + TypeScript 全栈方案,开发效率翻倍
前端·后端
IT_陈寒9 分钟前
Python的GIL让我以为CPU跑满了,结果...
前端·人工智能·后端
禅思院10 分钟前
AI对话前端从入门到崩溃:一个长对话引发的五层优化战争【六】
前端·架构·前端框架
南方程序猴25 分钟前
Codex CLI + VS Code 组合教程:从 Node.js 安装到接入国内中转站
gpt·ai·chatgpt·node.js·ai编程
冷小鱼34 分钟前
AI Agent 的核心算法:多智能体协作(Multi-Agent Systems)
前端·人工智能·算法·multi-agent·多智能体协作·systems
qq_422152571 小时前
PDF页面管理的几种实用方法:拆分、合并、删除指定页面
java·前端·pdf
先吃饱再说1 小时前
后端也能用 jQuery 爬网页?Cheerio 了解一下
爬虫·node.js·jquery
qq_212838971 小时前
后端Node.js + MySQL,前端Html+js,Nginx反向代理快速部署WEB项目
前端·mysql·node.js
徐小超1 小时前
从0到1落地AI知识问答系统(一):AI结对协作实战技巧
vue.js·node.js·全栈
Mh1 小时前
程序员和非程序员使用 AI 进行编程的区别究竟在哪里?
前端·javascript·xcode