Vite实战指南

前言

Vite（法语意为“快速”）是由 Vue.js 作者尤雨溪开发的前端构建工具，旨在为开发者提供极速的开发体验。其核心原理基于浏览器原生 ES 模块导入（ESM），无需打包即可启动开发服务器，实现毫秒级冷启动，代码修改后通过按需编译实现极速热更新（HMR），显著提升开发效率。本文就在开发中的实战，仔细介绍下如何安装及使用。

一、环境准备

Windows系统
安装Node.js
访问https://nodejs.org/，下载LTS版本（推荐v18.x or +）。
安装时勾选自动配置环境变量，完成安装后验证：

node -v  # 显示版本号（如v18.16.0）
npm -v   # 显示npm版本号（如9.5.1）

配置npm镜像（可选）
若国内下载速度慢，可切换为淘宝镜像：

npm config set registry https://registry.npmmirror.com/

二、创建Vite项目

通过命令行初始化项目
打开CMD或PowerShell，执行以下命令（以Vue项目为例）：

npm create vite@latest my-vue-app --template vue

my-vue-app：项目名称（自定义）。
–template vue：指定Vue模板（可选react, svelte等）。
安装依赖
进入项目目录并安装依赖：

cd my-vue-app npm install

三、启动开发服务器

运行项目

npm run dev

Vite会启动开发服务器，并在控制台输出访问地址（如http://localhost:5173/）。
浏览器自动打开页面，显示Vue默认欢迎界面。
热更新（HMR）
修改代码后，浏览器会实时刷新，无需手动重启服务。

四、生产环境构建

打包项目

npm run build

生成优化后的静态资源，存放在dist目录中。
本地预览构建产物

npm run preview

模拟生产环境，通过http://localhost:4173/预览打包后的效果。

五、核心配置（vite.config.js）

修改端口号

```javascript
export default defineConfig({server: {port: 3000  // 默认5173，修改为3000}
})
代理配置（解决跨域）
javascript
export default defineConfig({server: {proxy: {'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
})

六、常用插件集成

Vue插件（已内置）
创建项目时选择–template vue即自动配置。
React插件

npm create vite@latest my-react-app --template react

TypeScript支持
创建项目时选择–template vue-ts或–template react-ts模板。

七、常见问题解决

Node.js版本过低
升级Node.js至LTS版本（v18），参考nvm配置。
端口被占用
修改vite.config.js中的server.port配置。
依赖安装失败
清除npm缓存后重试：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

八、Vite核心优势

极速启动：利用浏览器原生ESM，无需打包即可启动服务。
按需编译：仅转换当前请求的文件，大幅缩短HMR时间。
开箱即用：内置TypeScript、JSX、CSS Modules等支持。
通过以上步骤，您可以在Windows系统中高效使用Vite进行前端开发。如需进一步优化，可参考https://cn.vitejs.dev/。