Vite入门指南

一、什么是Vite？

Vite（法语意为"快速"）是由Vue作者尤雨溪开辟的新型前端构建工具。它基于原生ES模块（ESM）实现，具有以下焦点优势：

• 极速启动：冷启动时间比Webpack快10-100倍
  
• 闪电般的热更新：HMR（热模块更换）保持应用状态
  
• 开箱即用的支持：TypeScript、JSX、CSS预处理惩罚等
  
• 机动的扩展：通过插件支持Rollup生态系统
  

二、环境预备

确保已安装：

• Node.js 14.18+ / 16+
  
• npm 7+ 或 yarn
  

1. # 验证安装
2. node -v
3. npm -v

复制代码

三、创建第一个项目

1. 初始化项目

1. npm create vite@latest my-vite-app

复制代码

选择框架模板（这里以React+TS为例）：

1. ✔ Select a framework: › React
2. ✔ Select a variant: › TypeScript

复制代码

2. 项目结构

1. my-vite-app/
2. ├── node_modules/
3. ├── public/
4. │   └── vite.svg
5. ├── src/
6. │   ├── assets/
7. │   ├── App.css
8. │   ├── App.tsx
9. │   ├── index.css
10. │   ├── main.tsx
11. │   └── vite-env.d.ts
12. ├── index.html
13. ├── package.json
14. ├── tsconfig.json
15. └── vite.config.ts

复制代码

3. 启动开辟服务器

1. cd my-vite-app
2. npm install
3. npm run dev

复制代码

访问 http://localhost:5173
四、焦点功能实践

1. 模块热更换（HMR）

修改 src/App.tsx：

1. function App() {
2.   return (
3.     <div className="App">
4.       <h1>Hello Vite!</h1>
5.       <p>Edit and save to see HMR in action</p>
6.     </div>
7.   )
8. }

复制代码

保存后浏览器立即更新，无需刷新页面
2. CSS处理惩罚

创建 src/Button.module.css：

1. .primary {
2.   background: #646cff;
3.   color: white;
4.   padding: 12px 24px;
5.   border-radius: 4px;
6. }

复制代码

在组件中使用：

1. import styles from './Button.module.css'
3. function Button() {
4.   return <button className={styles.primary}>Click Me</button>
5. }

复制代码

3. 静态资源处理惩罚

1. // 直接引入图片
2. import logo from './assets/react.svg'
4. function Logo() {
5.   return <img src={logo} alt="React logo" />
6. }

复制代码

五、Vite配置详解

修改 vite.config.ts：

1. import { defineConfig } from 'vite'
2. import react from '@vitejs/plugin-react'
4. export default defineConfig({
5.   plugins: [react()],
6.   server: {
7.     port: 3000,
8.     open: true
9.   },
10.   build: {
11.     outDir: 'dist',
12.     assetsDir: 'static'
13.   }
14. })

复制代码

六、插件系统

1. 常用插件示例

安装官方React插件：

1. npm install @vitejs/plugin-react -D

复制代码

配置插件：

1. import { defineConfig } from 'vite'
2. import react from '@vitejs/plugin-react'
4. export default defineConfig({
5.   plugins: [
6.     react({
7.       babel: {
8.         plugins: ['babel-plugin-styled-components']
9.       }
10.     })
11.   ]
12. })

复制代码

2. 社区插件示例（以SVG转换为例）

1. npm install vite-plugin-svgr -D

复制代码

配置：

1. import svgr from 'vite-plugin-svgr'
3. export default defineConfig({
4.   plugins: [
5.     svgr({
6.       svgrOptions: {
7.         icon: true
8.       }
9.     })
10.   ]
11. })

复制代码

使用SVG组件：

1. import { ReactComponent as Logo } from './logo.svg'
3. function App() {
4.   return <Logo />
5. }

复制代码

七、生产构建

1. npm run build

复制代码

生成优化后的静态文件：

1. dist/
2. ├── static/
3. │   ├── js/
4. │   ├── css/
5. │   └── assets/
6. └── index.html

复制代码

八、环境变量

1. 创建环境文件

1. .env                # 所有情况
2. .env.local          # 本地覆盖，git忽略
3. .env.development    # 开发环境
4. .env.production     # 生产环境

复制代码

2. 界说变量（前缀必须为VITE_）

1. VITE_API_URL=https://api.example.com

复制代码

3. 使用变量

1. console.log(import.meta.env.VITE_API_URL)

复制代码

九、与Webpack的主要差异

特性ViteWebpack启动时间毫秒级随着项目增长变慢构建方式ESM原生模块Bundle打包HMR速度保持状态快速更新必要重建模块配置复杂度简单相对复杂生态快速成长成熟 十、完整示例代码

查看GitHub仓库：

1. git clone https://github.com/vitejs/vite-template-react.git

复制代码

十一、最佳实践

• 按需加载：使用动态import实现代码分割
  
• 缓存策略：配置公道的hash文件名
  
• 性能优化：使用 vite-plugin-compression 举行Gzip压缩
  
• 类型安全：充分使用TypeScript类型查抄
  
• SSR支持：结合vite-ssr插件实现服务端渲染
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。