受够了webpack的速度,我选择了vite重构vue2项目

前言

在前端开发的浪潮中,Vue 一直是最受欢迎的框架之一。

但随着项目的发展,基于 Webpack 的 Vue 项目在启动和热更新时的缓慢表现,让很多开发者头疼不已。

好消息是,Vite 的出现为我们带来了全新的解决方案,今天我们就来聊聊如何把 Vue2 项目轻松迁移到 Vite,开启高效开发的新篇章。

首先,我们要明白 Vite 的优势。Vite 采用了 ES 模块热更新等先进技术,大幅提升了开发效率。对于 Vue2 项目,只要遵循正确的迁移步骤,就能享受到 Vite 带来的快速启动和近乎无延迟的热更新体验。

下面,让我们开始这个迁移之旅。

第一步:创建 Vite 项目

在开始之前,确保你的开发环境中已经安装了 Node.js。接下来,打开终端,执行以下命令来创建一个新的 Vite 项目:

npm init vite@latest

在命令执行过程中,按照提示输入项目名称,比如命名为 "vite-demo"。

当被问及项目类型时,选择 "vanilla",即不带框架的纯 JavaScript 项目。

这样,我们就搭建起了一个简洁的 Vite 项目基础架构。

第二步:配置 Vite

为了使 Vite 能够支持 Vue2,我们需要对 Vite 进行一些特定的配置。

首先,安装必要的插件:

  • @vitejs/plugin-vue2:这个插件能够让 Vite 支持 Vue2 项目,是 Vue2 与 Vite 顺利协作的关键桥梁。
  • vite-plugin-commonjs:由于 Vue2 的许多第三方库是基于 CommonJS 格式组织的,而 Vite 本身基于 ES 模块(ESM),这个插件能够帮助我们将 CommonJS 格式转换为 ESM 格式,从而确保项目的顺利运行。
  • unplugin-vue-components:这个插件用于实现组件的懒加载,尤其适合大型项目。对于拥有众多组件的项目来说,它可以有效减少初始加载的 bundle 大小,提升性能。

安装完成后,我们需要在项目根目录下创建或修改 vite.config.js 文件,添加以下配置代码:

javascript 复制代码
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue2";
import commonjs from "vite-plugin-commonjs";
import Components from "unplugin-vue-components/vite";

export default defineConfig({
  plugins: [vue(), commonjs(), Components({})]
});

第三步:替换项目文件

接下来,我们需要替换原有的项目文件,以适应新的 Vite 架构。删除 src 目录下的所有文件,然后创建一个新的 main.js 文件:

javascript 复制代码
import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

同时,创建一个新的 App.vue 文件:

vue 复制代码
<template>
  <div>Vue 2 与 Vite 的完美结合</div>
</template>

<script>
export default {
  name: "App",
};
</script>

第四步:运行项目

一切准备就绪后,我们只需在终端中执行以下命令来启动项目:

npm run dev

此时,Vite 将在本地启动开发服务器,默认端口为 5173。打开浏览器,访问 http://localhost:5173,你将看到我们刚刚创建的 Vue2 应用已经成功运行在 Vite 的环境中了。

但是报错了

需要重新安装

kotlin 复制代码
pnpm install vue@2 vue-template-compiler@2

重新运行一下,项目完美启动,这个时候就可以把我们之前的代码进行迁移,别忘了让测试把所有的页面都点击一下

值得一提的是,迁移完成后,项目启动时间将从原来的数分钟缩短至十几秒,而热更新的速度更是几乎达到了无延迟的程度。

这种效率的提升,无疑会极大地加快我们的开发节奏,让开发过程更加顺畅愉悦。

总结

将 Vue2 项目迁移到 Vite 并没有想象中那么复杂,只要按照上述步骤逐步操作,就能轻松实现项目的升级。

Vite 的强大性能和高效性,为 Vue2 项目注入了新的活力,也为前端开发带来了更美好的体验。

相关推荐
oil欧哟18 分钟前
🧐 我开发的 AI 文本纠错/润色工具 Text-Well 上线了~
前端·ai编程·next.js
Mintopia18 分钟前
网格布尔运算的三重奏:从像素的邂逅到模型的重生
前端·javascript·计算机图形学
Apifox19 分钟前
Apifox 7 月更新|通过 AI 命名参数及检测接口规范、在线文档支持自定义 CSS 和 JavaScript、鉴权能力升级
前端·后端·测试
Mintopia21 分钟前
用 Three.js 构建组件库:一场 3D 世界的 "乐高" 之旅
前端·javascript·three.js
十五_在努力22 分钟前
参透 JavaScript —— 彻底理解原型与原型链
前端·javascript
CodeSheep26 分钟前
这个老爷子研究的神奇算法,影响了全世界!
前端·后端·程序员
gnip28 分钟前
写一个浏览器工具插件
前端·javascript
啃火龙果的兔子35 分钟前
在 React + Ant Design 项目中实现文字渐变色
前端·react.js·前端框架
江城开朗的豌豆37 分钟前
Vue生命周期:beforeMount和mounted到底差在哪?手把手教你避坑!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue中动态添加对象属性?这个生命周期时机选对了没?
前端·javascript·vue.js