Vite on Liangweidong's blog

Vite 7 构建工具：从入门到 React / Vue / TypeScript 工程化实战

Tue, 15 Jul 2025 00:00:00 +0800

为什么写这篇：Vite 5+ 在 2023 年起成为新项目默认；Vite 6（2024-11）性能再次飞跃；Vite 7（2025-06）支持 Rolldown 实验性打包器。本文用最新 Vite 7 + React/Vue + TS 走通完整工程化流程，附带 monorepo 实战。

适用读者：要从 Webpack 迁到 Vite 的工程师；想给新项目选 Vite 的负责人；想用 Vite 7 最新特性（Rolldown / 环境变量）的中高级前端。

前置知识：会用 npm/pnpm；了解 React 或 Vue 基础；知道 TypeScript 是什么。

Vite 是什么
环境要求
创建 Vite 项目：5 种模板
项目结构详解
Vite 核心配置文件
TypeScript 集成
路径别名 @ 配置
反向代理与 HMR
多环境变量 .env 管理
生产构建：Rollup 与 Rolldown 实验
代码风格：ESLint + Prettier
VSCode 必装插件
Monorepo + pnpm workspace 实战
Vite vs Webpack 性能对比
常见排错

1. Vite 是什么

Vite（法语"快"的发音 /vit/）是下一代前端构建工具，由 Vue 作者尤雨溪团队开发。核心目标：让开发体验更快、更顺手。

1.1 核心特性

特性	说明
极速冷启动	开发模式不打包，按需 ESM 编译
毫秒级 HMR	修改文件只更新该模块，不重新加载页面
开箱即用 TS / JSX / CSS 预处理器	零配置支持
生产用 Rollup 打包	产物优化、Tree Shaking、代码分割
生态完整	Vue / React / Svelte / Solid / Preact 全支持
插件体系	兼容 Rollup 插件、自动兼容大多数 Webpack 插件

1.2 为什么快：传统 vs Vite

1
2
3
4
5
6
7


传统 Webpack 模式（dev）：
启动 ── 打包所有模块 ── 才能 serve

Vite 模式（dev）：
启动 ── 立即 serve ── 浏览器按需请求 ESM
 ↑
 浏览器原生 import 解析，服务器只编译被请求的文件

原理：现代浏览器都支持 <script type="module"> + 原生 ESM 导入。Vite 把"打包"这件事推迟到浏览器运行时——服务器只编译被请求的单个文件，完全跳过冷启动的全量打包。

2. 环境要求

工具	版本	备注
Node.js	20.19+ 或 22.12+	Vite 7 强制要求
pnpm（推荐）	9+	装包快、磁盘省
npm	10+	Node 自带
yarn	4+	Berry 系列

1
2


node -v # v20.19.0 或 v22.12.0+
pnpm -v # 9.x

不兼容旧 Node：Vite 7 不再支持 Node 18.x。

3. 创建 Vite 项目：5 种模板

3.1 命令行创建

1

pnpm create vite

交互式：

1
2
3
4
5


✔ Project name: … react-ts-demo1
✔ Select a framework: › React
✔ Select a variant: › TypeScript
✔ Use rolldown-vite (Experimental)?: no
✔ Install with pnpm and start now?: yes

跑完自动启动：

1
2
3
4
5


 VITE v7.2.7 ready in 339 ms

 ➜ Local: http://localhost:5173/
 ➜ Network: use --host to expose
 ➜ press h + enter to show help

3.2 直接指定模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# React + TS
pnpm create vite react-ts-demo --template react-ts

# Vue 3 + TS
pnpm create vite vue3-ts-demo --template vue-ts

# Svelte
pnpm create vite svelte-demo --template svelte-ts

# 原生 JS
pnpm create vite vanilla-demo --template vanilla

# 列出所有模板
pnpm create vite --help

3.3 Rolldown-Vite 实验性选项

Vite 7 实验性接入 Rolldown——基于 Rust 的下一代打包器，目标是替换 esbuild + Rollup，实现极致构建速度。

问：Use rolldown-vite (Experimental)?: no → 目前不建议生产用
实验性质，可能与某些插件不兼容
实际收益：5-10x 打包速度提升（仅生产模式）

4. 项目结构详解

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


react-ts-demo1/
├── dist/ # 构建产物
├── node_modules/
├── public/ # 不参与构建的静态资源
│ └── vite.svg
├── src/
│ ├── assets/ # 静态资源（被 webpack/vite 处理）
│ │ └── react.svg
│ ├── components/ # 公共组件
│ ├── App.tsx # 根组件
│ ├── main.tsx # 入口
│ ├── App.css
│ ├── index.css # 全局样式入口
│ └── vite-env.d.ts # Vite 内置类型
├── .gitignore
├── eslint.config.js # ESLint 9 扁平配置
├── index.html # 入口 HTML
├── package.json
├── pnpm-lock.yaml # 必须提交
├── README.md
├── tsconfig.app.json # 应用代码 TS 配置
├── tsconfig.json # TS 根配置
├── tsconfig.node.json # Node 环境 TS 配置
└── vite.config.ts # Vite 配置

tsconfig 拆三份：Vite 模板默认把 TS 配置拆成 tsconfig.app.json（业务代码）和 tsconfig.node.json（vite.config.ts），用 references 关联。

5. Vite 核心配置文件

vite.config.ts：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

export default defineConfig({
 plugins: [react()],

 resolve: {
 alias: {
 '@': path.resolve(__dirname, 'src')
 }
 },

 server: {
 port: 8080,
 host: '127.0.0.1',
 open: true,
 proxy: {
 '/api': {
 target: 'http://localhost:3000',
 changeOrigin: true,
 rewrite: (p) => p.replace(/^\/api/, '')
 }
 }
 },

 build: {
 target: 'es2020',
 sourcemap: false,
 outDir: 'dist',
 rollupOptions: {
 output: {
 manualChunks: {
 react: ['react', 'react-dom'],
 router: ['react-router-dom'],
 ui: ['antd']
 }
 }
 }
 }
})

6. TypeScript 集成

Vite 自动支持 .ts / .tsx / .vue 文件——不需要 ts-loader / babel-loader。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
 readonly VITE_APP_TITLE: string
 readonly VITE_API_BASE: string
}

interface ImportMeta {
 readonly env: ImportMetaEnv
}

读环境变量：

1
2
3


console.log(import.meta.env.VITE_API_BASE)
console.log(import.meta.env.MODE) // 'development' | 'production'
console.log(import.meta.env.DEV) // boolean

7. 路径别名 @ 配置

7.1 vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
 resolve: {
 alias: {
 '@': path.resolve(__dirname, 'src')
 }
 }
})

7.2 tsconfig.json（必须配，否则 TS 找不到）

1
2
3
4
5
6
7
8


{
 "compilerOptions": {
 "baseUrl": ".",
 "paths": {
 "@/*": ["src/*"]
 }
 }
}

之后就能 import Foo from '@/components/Foo'。

8. 反向代理与 HMR

8.1 代理后端 API

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


server: {
 proxy: {
 '/api': {
 target: 'http://localhost:3000',
 changeOrigin: true,
 rewrite: (p) => p.replace(/^\/api/, '')
 },
 '/socket.io': {
 target: 'http://localhost:3000',
 ws: true, // 支持 WebSocket
 changeOrigin: true
 }
 }
}

8.2 HMR 配置

1
2
3
4
5
6
7


server: {
 hmr: {
 host: '127.0.0.1',
 port: 8080,
 overlay: true // 错误时全屏遮罩
 }
}

8.3 在 React 中接受 HMR

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
 <StrictMode>
 <App />
 </StrictMode>
)

Vite 自动通过 import.meta.hot 注入 HMR API，不需要额外配置——React Fast Refresh 自动接管。

9. 多环境变量 .env 管理

Vite 默认只有 development 和 production。要扩展：

1
2
3
4


.env # 所有环境都加载
.env.development # npm run dev 加载
.env.test # npm run build --mode test 加载
.env.production # npm run build --mode production 加载

9.1 .env.development

1
2


VITE_APP_TITLE = '开发环境'
VITE_API_BASE = '/api'

9.2 .env.production

1
2


VITE_APP_TITLE = '生产环境'
VITE_API_BASE = 'https://api.example.com'

9.3 package.json scripts

1
2
3
4
5
6
7
8
9


{
 "scripts": {
 "dev": "vite",
 "build": "tsc -b && vite build",
 "build:test": "tsc --noEmit && vite build --mode test",
 "build:prod": "tsc --noEmit && vite build --mode production",
 "preview": "vite preview"
 }
}

必须 VITE_ 开头才能被 import.meta.env 识别——防止意外暴露服务端配置。

10. 生产构建：Rollup 与 Rolldown 实验

10.1 默认 Rollup 打包

1
2
3
4
5
6
7


pnpm build
# vite v7.2.7 building for production...
# ✓ 1234 modules transformed.
# dist/index.html 0.45 kB
# dist/assets/index-abc123.js 312.50 kB │ gzip: 102.40 kB
# dist/assets/index-def456.css 45.20 kB │ gzip: 12.10 kB
# ✓ built in 5.42s

10.2 关键选项

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


build: {
 target: 'es2020', // 目标浏览器
 outDir: 'dist',
 sourcemap: false, // 生产不开
 minify: 'esbuild', // 默认 esbuild，可换 terser
 cssCodeSplit: true, // CSS 拆分
 chunkSizeWarningLimit: 1500, // 块大小警告阈值
 rollupOptions: {
 output: {
 manualChunks: { /* 拆包 */ },
 entryFileNames: 'assets/[name].[hash].js',
 chunkFileNames: 'assets/[name].[hash].js',
 assetFileNames: 'assets/[name].[hash][extname]'
 }
 }
}

10.3 启用 Rolldown 实验

升级到 Vite 7 + 安装 Rolldown Vite：

1

pnpm add rolldown-vite -D

目前不建议生产用——某些插件还不兼容。

11. 代码风格：ESLint + Prettier

11.1 ESLint 9 扁平配置（vite create 自动生成）

eslint.config.js：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
 { ignores: ['dist'] },
 {
 extends: [js.configs.recommended, ...tseslint.configs.recommended],
 files: ['**/*.{ts,tsx}'],
 languageOptions: {
 ecmaVersion: 2020,
 globals: globals.browser
 },
 plugins: {
 'react-hooks': reactHooks,
 'react-refresh': reactRefresh
 },
 rules: {
 ...reactHooks.configs.recommended.rules,
 'react-refresh/only-export-components': 'warn'
 }
 }
)

11.2 Prettier

1

pnpm add -D prettier eslint-config-prettier

.prettierrc.json：

1
2
3
4
5
6
7
8


{
 "printWidth": 100,
 "tabWidth": 2,
 "semi": false,
 "singleQuote": true,
 "trailingComma": "all",
 "endOfLine": "auto"
}

12. VSCode 必装插件

插件	用途
ESLint	9+ 扁平配置支持
Prettier	自动格式化
TypeScript Vue Plugin (Volar)	Vue 3 + TS
ES7+ React/Redux snippets	React 代码片段
Tailwind CSS IntelliSense	Tailwind 类名补全
Path Intellisense	路径补全
Stylelint	CSS/Less/SCSS 检查

13. Monorepo + pnpm workspace 实战

13.1 pnpm-workspace.yaml

1
2
3


packages:
 - 'apps/*'
 - 'packages/*'

13.2 apps/web/package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{
 "name": "@myorg/web",
 "private": true,
 "scripts": {
 "dev": "vite",
 "build": "tsc -b && vite build"
 },
 "dependencies": {
 "@myorg/utils": "workspace:*",
 "@myorg/ui": "workspace:*"
 }
}

13.3 packages/utils/package.json

1
2
3
4
5
6
7
8
9


{
 "name": "@myorg/utils",
 "version": "1.0.0",
 "type": "module",
 "main": "./src/index.ts",
 "exports": {
 ".": "./src/index.ts"
 }
}

13.4 跨包引用

1
2
3


// apps/web/src/App.tsx
import { formatDate } from '@myorg/utils'
import { Button } from '@myorg/ui'

1
2
3


pnpm install # 装所有工作区依赖 + 链接
pnpm -F @myorg/web dev # 只跑 web 包的 dev
pnpm -r build # 所有包 build

14. Vite vs Webpack 性能对比

维度	Vite 7	Webpack 5
冷启动	< 1s（按需编译）	10-30s（全量打包）
HMR 速度	< 100ms	1-5s
生产构建	Rollup，5-15s	30s-2min
配置复杂度	零配置 + 少量 plugins	大量 loader + plugin
生态兼容	Rollup 插件 + 大量 Vite 插件	Webpack 生态（成熟）
SSR 支持	强（Vite SSR API）	中（webpack-ssr-plugin）
学习曲线	平缓	陡峭

2025 选型：

新项目：直接 Vite（启动快、配置简单）

老 Webpack 项目：不必强迁——Webpack 5 + 持久化缓存已经够快

大厂 monorepo：评估 Rspack（Rust 编写、Webpack 兼容 API）—— 字节跳动 + Microsoft 在用

15. 常见排错

15.1 TS2307: Cannot find module ‘./App.vue’

解法：建 src/vite-env.d.ts（Vite 模板已自动生成）：

1
2
3
4
5
6


/// <reference types="vite/client" />
declare module '*.vue' {
 import type { DefineComponent } from 'vue'
 const component: DefineComponent<{}, {}, any>
 export default component
}

15.2 import path 找不到

检查清单：

vite.config.ts 配了 alias
tsconfig.json 配了 paths（两端必须都配）
重启 VSCode（让 TS 服务重读 tsconfig）

15.3 代理 404

1
2
3
4
5
6
7


proxy: {
 '/api': {
 target: 'http://localhost:3000',
 changeOrigin: true,
 // rewrite: (p) => p.replace(/^\/api/, '') // ⚠️ 注释掉，看后端路由
 }
}

先看 dev server 真正发到哪——加 bypass: (req) => req.url 在 proxy 里打印。

15.4 端口被占用

1
2
3
4
5
6
7


# Windows
netstat -ano | findstr :8080
taskkill /PID <pid> /F

# macOS / Linux
lsof -i :8080
kill -9 <pid>

或改 Vite 配置：

1
2
3
4


server: {
 port: 8081, // 换个端口
 strictPort: false // 端口被占时自动换
}

小结

Vite 7 是 2025 年前端构建工具的"事实标准"：

极快冷启动（< 1s）—— 跳过 dev 模式的全量打包
TypeScript / JSX / CSS 预处理器零配置
@ 路径别名两行配置
多环境变量 .env.development / .env.production
生产 Rollup 打包，可选 Rolldown 实验（更快）
monorepo 配合 pnpm workspace 一行 pnpm -r build 跑所有包

下一步：学 Vite 插件开发（写自己的 plugin）、Vite SSR（配合 React 19 RSC / Vue 3 Nuxt）、微前端（Vite + Module Federation）。

参考资料

Vue 3 + TypeScript + Vite 脚手架与工程化实战

Sun, 15 Oct 2023 00:00:00 +0800

为什么写这篇：2023 年 Vue 3 + Vite + TypeScript 已经是新项目"标准三件套"。本文走通从 npm create vite 到生产环境打包的完整流程，把代码片段 / ESLint / Prettier / 路径别名 / 多环境变量 / 代理一次性配齐。

适用读者：Vue 3 初学者；从 Vue 2 迁过来的工程师；想用 Vite 替代 Webpack 的项目负责人。

前置知识：会用 npm；了解 Vue / TypeScript 基础。

1. 环境要求

工具	版本	备注
Node.js	20.12.0+（推荐 LTS）	Vite 5 要求 Node 18+ 或 20+
npm	10+	Node 自带
pnpm	8+（推荐）	装包快、磁盘省
Vite	5.3+	本文以 Vite 5 为准
VSCode	最新版	装 Vue 官方插件

Vite 7（2025 推出） 要求 Node 20.19+ 或 22.12+。

1
2
3


node -v # v20.12.0
npm -v # 10.x
pnpm -v # 8.x

2. 两种创建项目方式

方式一：`npm create vite@latest`（推荐）

1

npm create vite@latest

交互式：

1
2
3
4
5


✔ Project name: … vue3-ts-demo
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript
✔ Use rolldown-vite (Experimental)?: no # 实验性质，暂不用
✔ Install with pnpm and start now?: yes

完成后 Vite 自动启动：

1
2
3
4
5


 VITE v5.3.5 ready in 339 ms

 ➜ Local: http://localhost:5173/
 ➜ Network: use --host to expose
 ➜ press h + enter to show help

Rolldown-Vite：Vite 团队基于 Rust 的下一代打包器，目前实验阶段。生产环境建议关闭。

方式二：`npm init vue@latest`（Vue 官方脚手架）

1

npm init vue@latest

1
2
3
4
5
6
7
8
9


✔ Project name: … iip-frontend
✔ Add TypeScript? Yes
✔ Add JSX Support? No
✔ Add Vue Router? Yes
✔ Add Pinia? Yes
✔ Add Vitest? No
✔ Add an End-to-End Testing Solution? No
✔ Add ESLint? Yes
✔ Add Prettier? Yes

区别：

create-vite 极简，只有 Vue + TS

create-vue 是 Vue 官方脚手架，可选 Router/Pinia/测试/格式化

完成后：

1
2
3
4
5
6
7
8


cd iip-frontend
npm install
npm run format # Prettier 全量格式化
npm run dev

git init && git add -A && git commit -m "init"
git remote add origin <YOUR_REPO_URL>
git push -u origin master

3. 项目目录结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


vue3-ts-demo/
├── dist/ # 构建产物
├── node_modules/
├── public/ # 不参与构建的静态资源
│ └── vite.svg
├── src/
│ ├── assets/ # 静态资源（图片、字体）
│ ├── components/ # 公共组件
│ │ └── HelloWorld.vue
│ ├── router/ # vue-router 配置（若用 create-vue）
│ ├── stores/ # Pinia 状态
│ ├── views/ # 页面级组件
│ ├── App.vue # 根组件
│ ├── main.ts # 入口
│ ├── env.d.ts # 环境变量类型
│ └── vite-env.d.ts # Vite 内置类型
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── .eslintrc.cjs # ESLint 配置
├── .prettierrc.json # Prettier 配置
├── .gitignore
├── index.html # 入口 HTML
├── package.json
├── pnpm-lock.yaml # 必须提交
├── README.md
├── tsconfig.json # TS 根配置（references）
├── tsconfig.app.json # 应用代码 TS 配置
├── tsconfig.node.json # Node 环境 TS 配置
└── vite.config.ts # Vite 配置

tsconfig 的 references：Vite 模板默认拆成 tsconfig.app.json（业务代码）和 tsconfig.node.json（Vite 配置），用 references 关联。

4. IDE 工具与 VSCode 插件

4.1 必装插件

插件	用途
Volar	Vue 3 + TS 官方语言服务（替代 Vetur）
TypeScript Vue Plugin (Volar)	TS 侧的 .vue 类型支持
ESLint	代码检查
Prettier	格式化
EditorConfig for VS Code	跨编辑器风格
Auto Rename Tag	HTML 标签自动改名
Path Intellisense	路径补全
Vue 3 Snippets	代码片段

4.2 禁用 Vue 2 插件

如果之前装过 Vetur（Vue 2 时代的官方插件），必须禁用或卸载——它和 Volar 冲突，类型推断会乱。

5. 代码片段配置

.vscode/vue3.code-snippets：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


{
 "Print to console": {
 "prefix": "vue3",
 "body": [
 "<!-- ${1:new page} -->",
 "<!-- @author: ${2:lwd} -->",
 "<!-- @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} -->",
 "<!-- ${TM_FILENAME} -->",
 "<template>",
 " <div></div>",
 "</template>",
 "",
 "<script setup lang=\"ts\">",
 "</script>",
 "",
 "<style scoped>",
 "</style>"
 ],
 "description": "Vue 3 + TS 单文件组件模板"
 }
}

输入 vue3 + Tab 即可生成 SFC 三段式骨架。

6. Vite 配置：路径别名 + 代理 + 端口

6.1 装 Node 类型声明

1

npm i @types/node -D

让 TS 知道 path.resolve、process.env 等 Node API。

6.2 tsconfig.node.json 加 types

1
2
3
4
5
6
7


{
 "compilerOptions": {
 "types": ["node"],
 "composite": true
 },
 "include": ["vite.config.ts"]
}

6.3 vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'

// https://vite.dev/config/
export default defineConfig({
 resolve: {
 // 路径别名
 alias: {
 '@': path.resolve(__dirname, 'src')
 }
 },

 plugins: [vue()],

 server: {
 port: 8080, // 启动端口
 host: '127.0.0.1', // 监听地址
 open: true, // 自动打开浏览器
 hmr: {
 host: '127.0.0.1',
 port: 8080
 },
 // 反向代理
 proxy: {
 '/api': {
 target: 'https://your-backend.example.com',
 changeOrigin: true,
 rewrite: (path: string) => path.replace(/^\/api/, '')
 }
 }
 },

 // 生产构建
 build: {
 target: 'es2020',
 sourcemap: false,
 rollupOptions: {
 output: {
 manualChunks: {
 // 把第三方库拆成单独 chunk
 vue: ['vue', 'vue-router', 'pinia'],
 echarts: ['echarts']
 }
 }
 }
 }
})

tsconfig.json 也要加别名（不然 TS 找不到 @/components/...）：

1
2
3
4
5
6
7
8


{
 "compilerOptions": {
 "baseUrl": ".",
 "paths": {
 "@/*": ["src/*"]
 }
 }
}

7. 代码风格：ESLint + Prettier

7.1 装依赖

1

npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

7.2 .eslintrc.cjs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


module.exports = {
 root: true,
 parser: 'vue-eslint-parser',

 parserOptions: {
 parser: '@typescript-eslint/parser',
 ecmaVersion: 2020,
 sourceType: 'module',
 ecmaFeatures: { jsx: true }
 },

 extends: [
 'plugin:vue/vue3-recommended',
 'plugin:@typescript-eslint/recommended'
 ],

 rules: {
 // 自定义规则...
 }
}

7.3 .eslintignore

1
2
3


node_modules/
dist/
index.html

7.4 package.json scripts

1
2
3
4
5


{
 "scripts": {
 "eslint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore --fix src"
 }
}

7.5 Prettier

1

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

.prettierrc.cjs：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


module.exports = {
 printWidth: 80,
 tabWidth: 2,
 useTabs: false,
 semi: false, // Vue 风格无分号
 singleQuote: true,
 quoteProps: 'as-needed',
 trailingComma: 'all',
 bracketSpacing: true,
 arrowParens: 'always',
 endOfLine: 'auto'
}

.eslintrc.cjs extends 末尾加 'plugin:prettier/recommended'（关掉与 prettier 冲突的规则）。

7.6 VSCode 保存自动格式化

.vscode/settings.json：

1
2
3
4
5
6
7
8
9


{
 "editor.formatOnSave": true,
 "[javascript]": {
 "editor.defaultFormatter": "dbaeumer.vscode-eslint"
 },
 "[vue]": {
 "editor.defaultFormatter": "Vue.volar"
 }
}

8. 多环境变量配置

Vite 默认只有 development 和 production 两套环境。要多套（如 dev / test / staging / prod），自己建文件：

1
2
3
4


.env # 所有环境都加载
.env.development # npm run dev 加载
.env.test # npm run build:test 加载
.env.production # npm run build:prod 加载

8.1 .env.development

1
2
3
4


# 必须 VITE_ 开头才能被 import.meta.env 识别
VITE_ENV = 'development'
VITE_APP_BASE_API = '/api'
VITE_APP_TITLE = '开发环境'

8.2 .env.production

1
2
3


VITE_ENV = 'production'
VITE_APP_BASE_API = 'https://api.example.com'
VITE_APP_TITLE = '生产环境'

8.3 package.json scripts

1
2
3
4
5
6
7
8
9


{
 "scripts": {
 "dev": "vite",
 "build": "vue-tsc -b && vite build",
 "build:test": "tsc --noEmit && vite build --mode test",
 "build:prod": "tsc --noEmit && vite build --mode production",
 "preview": "vite preview"
 }
}

8.4 代码里读环境变量

1
2


console.log(import.meta.env.VITE_APP_BASE_API)
console.log(import.meta.env.VITE_ENV)

注意：

自定义变量必须 VITE_ 开头（防止意外暴露服务端配置）

import.meta.env 是 Vite 注入的，不在 process.env 里

9. 常见工程化依赖

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


# 路由
pnpm add vue-router@4

# 状态管理
pnpm add pinia pinia-plugin-persist # 后者是持久化插件

# HTTP
pnpm add axios
pnpm add nprogress # 顶部进度条
pnpm add @types/nprogress -D

# UI 库
pnpm add element-plus @element-plus/icons-vue

# 工具
pnpm add dayjs lodash
pnpm add @types/lodash -D

9.1 Pinia 持久化示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// store/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
 state: () => ({
 token: '',
 name: ''
 }),
 actions: {
 setToken(token: string) {
 this.token = token
 }
 },
 persist: {
 key: 'user-store',
 storage: localStorage
 }
})

9.2 Axios 封装示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


// utils/http.ts
import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false })

const http = axios.create({
 baseURL: import.meta.env.VITE_APP_BASE_API,
 timeout: 15000
})

http.interceptors.request.use(config => {
 NProgress.start()
 const token = localStorage.getItem('token')
 if (token) {
 config.headers.Authorization = `Bearer ${token}`
 }
 return config
})

http.interceptors.response.use(
 response => {
 NProgress.done()
 return response.data
 },
 error => {
 NProgress.done()
 return Promise.reject(error)
 }
)

export default http

10. TS2307 找不到 .vue 类型

错误信息：

1

error TS2307: Cannot find module './App.vue' or its corresponding type declarations.

解法：建 src/vite-env.d.ts（Vite 模板已自动生成）：

1
2
3
4
5
6
7


/// <reference types="vite/client" />

declare module '*.vue' {
 import type { DefineComponent } from 'vue'
 const component: DefineComponent<{}, {}, any>
 export default component
}

Why：.vue 不是原生模块，需要 TS 知道它的"形状"。DefineComponent 是 Vue 3 提供的 SFC 类型。

小结

Vue 3 + Vite + TS 工程化核心要点：

创建：npm create vite@latest 选 Vue + TS 模板，30 秒跑通 demo
目录：用 src/views、src/components、src/router、src/stores 标准化
配置：vite.config.ts 配 alias / proxy / port，tsconfig.json 配 paths
代码风格：ESLint + Prettier 双管齐下，保存自动格式化
环境变量：VITE_ 前缀 + 多文件（.env.development / .env.production）
HTTP：Axios 拦截器 + NProgress 进度条 + 401 自动跳登录

下一步：学 Vue 3 专属特性——Composition API、<script setup>、Pinia 持久化、Suspense、<Teleport>、Volar 类型推断、Vitest 单元测试。Vue 3 + Vite 是 2024+ 的新项目默认选择。

参考资料

Remotion 视频创作：React 写视频的工程化实践

Sat, 15 Feb 2020 00:00:00 +0800

什么是 Remotion

Remotion 是 2021 年起瑞典团队开发的 React 视频框架：用 React 组件描述视频帧，最后用 FFmpeg 渲染成 MP4。优势：

代码即视频：可以组件化、参数化、用 Git 版本管理
数据驱动：JSON 配置 → 自动生成几十条视频
AI 友好：搭配 LLM 生成文案 + 自动化脚本，几分钟产出可发布短视频

前置环境

Node.js 18+（推荐 22）
FFmpeg（Remotion 渲染依赖）
React 基础
一台能跑 Chrome 的电脑（Remotion Studio 用 Chrome preview）

创建项目

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


npx create-video@latest
# create-video@4.0.443
# Welcome to Remotion!

# 选择模板
# > Hello World 新手先用这个
# Next.js SaaS template
# Blank Nothing except an empty canvas
# Recorder A video production tool built entirely in JavaScript
# ...

按提示选：

Add TailwindCSS: yes
Add agent skills: yes（如果用 Claude Code 协作）
一路回车

用 IDEA 打开

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# 装依赖
npm install

# 装 Studio CLI
npm i @remotion/cli

# 启动 Studio（默认 3000 端口）
npm dev
# 或
npx remotion studio

浏览器打开 http://localhost:3000，左侧是组件树，中间是时间线，右侧是实时预览。

渲染导出

1
2


# 渲染当前 Composition 为 MP4
npx remotion render out/HelloWorld.mp4

默认输出在 out/HelloWorld.mp4。

核心 API

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


import { useCurrentFrame, useVideoConfig, AbsoluteFill, Img, Audio, Sequence } from 'remotion';

export const HelloWorld = () => {
 const frame = useCurrentFrame();
 const { fps, durationInFrames, width, height } = useVideoConfig();

 return (
 <AbsoluteFill style={{ backgroundColor: 'white' }}>
 <h1 style={{
 fontSize: 80,
 textAlign: 'center',
 paddingTop: 200,
 color: frame > 30 ? 'red' : 'black',
 }}>
 第 {Math.round(frame / fps)} 秒
 </h1>
 </AbsoluteFill>
 );
};

useCurrentFrame() 返回当前帧号（从 0 开始），useVideoConfig() 返回 fps / 时长 / 宽高。AbsoluteFill 是定位容器。

关键概念

Composition：一段视频的元数据（fps、width、height、durationInFrames、组件）
Sequence：在指定时间区间内显示子组件
useCurrentFrame / useVideoConfig：读取当前播放状态
staticFile()：引用 public/ 下的静态资源

常用内置组件

组件	用途
`<AbsoluteFill>`	绝对定位全屏容器
`<Sequence from={30} durationInFrames={60}>`	1~3 秒显示子组件
`<Img src={staticFile('cover.png')} />`	显示图片
`<Audio src={staticFile('bgm.mp3')} />`	播放音频
`<Video src={staticFile('demo.mp4')} />`	播放视频
`<Series>`	多个 Sequence 串联

动画模式

弹簧物理（spring）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { spring, useCurrentFrame, useVideoConfig } from 'remotion';

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
 frame,
 fps,
 config: { damping: 10, stiffness: 100, mass: 0.5 },
});

缓动（interpolate）

1
2
3
4


import { interpolate } from 'remotion';

const opacity = interpolate(frame, [0, 30, 60, 90], [0, 1, 1, 0]);
const translateY = interpolate(frame, [0, 30], [100, 0]);

数据驱动批量生成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// 配合 LLM 生成 JSON 数组
const videos = [
 { id: 'v1', title: '春节特辑', duration: 60 },
 { id: 'v2', title: '清明特辑', duration: 60 },
];

export const RemotionRoot = () => {
 return videos.map(v => (
 <Composition
 key={v.id}
 id={v.id}
 component={MyVideo}
 durationInFrames={v.duration * 30}
 fps={30}
 width={1080}
 height={1920}
 />
 ));
};

配合 Claude Code 写一个生成脚本：

1
2
3
4
5


# 调用 mmx-cli 生成文案 + TTS 配音
# 然后批量渲染
for id in v1 v2 v3; do
 npx remotion render "$id" "out/$id.mp4"
done

TailwindCSS 集成

1
2
3
4
5
6
7


# 创建项目时已经选了 TailwindCSS
# 组件里直接用
export const Card = () => (
 <AbsoluteFill className="bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
 <h1 className="text-6xl font-bold text-white">Hello</h1>
 </AbsoluteFill>
);

性能优化

减少状态：Remotion 渲染是逐帧的，组件内 React state 频繁变化会拖慢
避免 useEffect：用 useCurrentFrame 替代
静态资源：用 staticFile() 引用，Remotion 会在打包时复制
Chrome 远程调试：Studio 启动时加 --no-sandbox 在 Docker 里

常见问题

渲染卡死 / 内存溢出

1
2
3
4
5


# 加 --concurrency 限制并发
npx remotion render --concurrency=2

# 加 --jpeg-quality 降低质量换速度
npx remotion render --jpeg-quality=80

Windows FFmpeg 路径

1
2
3


# 把 C:\ffmpeg\bin 加到 PATH
# 或用 Scoop
scoop install ffmpeg

Linux 服务器无 GUI 渲染

1
2
3
4
5


# 装 headless Chrome
sudo apt install -y chromium-browser

# Remotion 自动用 headless Chrome
npx remotion render

进阶：Remotion + Vite 独立集成

不用 create-video 脚手架，把 Remotion 集成进现有 Vite 项目：

1

npm i @remotion/cli @remotion/renderer

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// src/Root.tsx
import { Composition } from 'remotion';
import { MyVideo } from './MyVideo';

export const RemotionRoot = () => (
 <>
 <Composition
 id="MyVideo"
 component={MyVideo}
 durationInFrames={300}
 fps={30}
 width={1920}
 height={1080}
 />
 </>
);

1
2
3
4
5


// remotion.config.ts
import { Config } from '@remotion/cli/config';

Config.setVideoImageFormat('jpeg');
Config.setConcurrency(4);

下一步

想要 LLM 自动生成文案 + TTS 配音 + Remotion 渲染一条龙，看 mmx-cli 文档
想要 GitHub Action 自动渲染，看 https://www.remotion.dev/docs/ssr

参考资料

Remotion 官方：https://www.remotion.dev/docs
Remotion 中文文档：https://remotion-zh-cn-doc.vercel.app/
Remotion Gallery：https://www.remotion.dev/showcase

Vite on Liangweidong's blog

Vite 7 构建工具：从入门到 React / Vue / TypeScript 工程化实战

目录

1. Vite 是什么

1.1 核心特性

1.2 为什么快：传统 vs Vite

2. 环境要求

3. 创建 Vite 项目：5 种模板

3.1 命令行创建

3.2 直接指定模板

3.3 Rolldown-Vite 实验性选项

4. 项目结构详解

5. Vite 核心配置文件

6. TypeScript 集成

7. 路径别名 @ 配置

7.1 vite.config.ts

7.2 tsconfig.json（必须配，否则 TS 找不到）

8. 反向代理与 HMR

8.1 代理后端 API

8.2 HMR 配置

8.3 在 React 中接受 HMR

9. 多环境变量 .env 管理

9.1 .env.development

9.2 .env.production

9.3 package.json scripts

10. 生产构建：Rollup 与 Rolldown 实验

10.1 默认 Rollup 打包

10.2 关键选项

10.3 启用 Rolldown 实验

11. 代码风格：ESLint + Prettier

11.1 ESLint 9 扁平配置（vite create 自动生成）

11.2 Prettier

12. VSCode 必装插件

13. Monorepo + pnpm workspace 实战

13.1 pnpm-workspace.yaml

13.2 apps/web/package.json

13.3 packages/utils/package.json

13.4 跨包引用

14. Vite vs Webpack 性能对比

15. 常见排错

15.1 TS2307: Cannot find module ‘./App.vue’

15.2 import path 找不到

15.3 代理 404

15.4 端口被占用

小结

参考资料

Vue 3 + TypeScript + Vite 脚手架与工程化实战

目录

1. 环境要求

2. 两种创建项目方式

方式一：npm create vite@latest（推荐）

方式二：npm init vue@latest（Vue 官方脚手架）

3. 项目目录结构

4. IDE 工具与 VSCode 插件

4.1 必装插件

4.2 禁用 Vue 2 插件

5. 代码片段配置

6. Vite 配置：路径别名 + 代理 + 端口

6.1 装 Node 类型声明

6.2 tsconfig.node.json 加 types

6.3 vite.config.ts

7. 代码风格：ESLint + Prettier

7.1 装依赖

7.2 .eslintrc.cjs

7.3 .eslintignore

7.4 package.json scripts

7.5 Prettier

7.6 VSCode 保存自动格式化

8. 多环境变量配置

8.1 .env.development

8.2 .env.production

8.3 package.json scripts

8.4 代码里读环境变量

9. 常见工程化依赖

9.1 Pinia 持久化示例

9.2 Axios 封装示例

10. TS2307 找不到 .vue 类型

小结

参考资料

Remotion 视频创作：React 写视频的工程化实践

方式一：`npm create vite@latest`（推荐）

方式二：`npm init vue@latest`（Vue 官方脚手架）