前段时间在看公司前端项目的时候，发现有个项目用的是vite.config.js文件，而不是我们经常看到的vue.config.js文件，所以不禁好奇，这是个啥玩意？
百度说vite.config.js文件说明项目是通过vite构建的，这里就简单的了解一下这个vite。
Vite是个啥？
Vite 是一个前端开发工具，它既能快速启动项目，又能构建生产代码。Vite 利用现代浏览器原生支持的 ES Module，直接在浏览器中按需加载代码，省去了传统工具（如 Webpack）的“打包”步骤。
总结来说，就是说开发模式下，Webpack每次都要重新编译整个项目，而Vite像热部署，只更新修改的部分，这样开发更高效。
这就不得不联想到SpringBoot项目的devtools,通过引入spring-boot-devtools就可以实现热部署重启项目（通过保留JVM状态，避免重复初始化耗时，达到快速重启项目的目的），我们知道devtools是存在失效场景的，我想Vite应该也是一样，修改配置文件的时候，同样也要手动重启项目。
me就先简单的理解为：开发模式下，Vite是按需编译，类似于懒加载，Webpack是全量打包，类似于全量加载。
百度说大型复杂项目可能还用Webpack，而中小型或快速迭代项目适合Vite。我看了下我正在看的这个公司项目确实是一个小项目，就是抽出完整项目里面的一小块业务逻辑用于展示在手机端。这个时候就想到了Java和NodeJS，NodeJS可以用来快速迭代中小型项目，Java基于完备的生态圈和健壮的配套技术可以适配大型项目。
<p style="color: red">这里简单的了解几个概念：</p>
冷启动：
指系统或应用从零开始初始化的启动过程。此时所有资源（如内存、依赖库、配置文件）需重新加载，无任何缓存可用。
热更新：
在不重启应用的情况下，动态替换或新增部分代码或资源（热加载），更新粒度相比来说更细。
热部署：
热部署是在服务器运行时重新部署整个应用，适用于生产环境，更新粒度相比来说更粗。
基于Vite搭建vue2.x项目
第一步：
检查当前系统Node.js的版本，保证不能低于Vite的最低要求Node.js14.X。执行命令：
npm create vite@latest my-vue2-project --template vanilla
cd my-vue2-project
npm install
npm create vite@latest：调用 npm 来执行 create 脚手架命令，这里指定的是 vite 的最新版本（@latest）。
my-vue2-project：项目名程
--template vanilla：使用模板选项来指定项目的基础模板类型
这里vite的版本有点小高，在后续执行npm install vite-plugin-vue2会直接报错
npm ERR! dev vite@"^6.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^2.0.0 || ^3.0.0 || ^4.0.0" from vite-plugin-vue2@2.0.3
npm ERR! node_modules/vite-plugin-vue2
第二步：
通过 Vite 构建一个 Vue 2.x 项目需要一些额外的配置，因为 Vite 默认支持的是 Vue 3，需要
替换vue3.x为vue2.x
添加依赖：vite-plugin-vue2
执行命令：
npm install vue2.6.14 vite-plugin-vue2 --save-dev
另外：如果 vue 的版本 >= 2.7.0 需要使用 @vitejs/plugin-vue2
否则使用 vite-plugin-vue2。
第三步：
在package.json文件中修改vite的版本，设置为"vite": "^4.0.0",删除package-lock.json文件和node_modules文件夹。重新执行
npm install
第四步：
配置 vite.config.js
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
export default defineConfig({
plugins: [createVuePlugin()]
});
第五步：
修改src目录下的main.js文件
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');
修改src目录下的App.vue文件
<template>
<div id="app">
<h1>Hello Vue 2 with Vite!</h1>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
</style>
把src目录下的index.html移动到public目录
控制台执行npm run dev，浏览器可以正常访问：
结尾
giao！！！
