目录一、从一个不对劲的地方说起二、Vite 帮你解决了什么问题2.1 问题一浏览器不认识 TypeScript 和 .vue 文件2.2 问题二管理第三方库很麻烦2.3 问题三写代码时需要实时预览2.4 问题四上线前需要打包优化三、Vite 到底是什么为什么叫 Vite四、Vite 怎么用4.1 创建你的第一个 Vite 项目4.2 项目目录长什么样4.3 三个核心命令4.4 配置文件入门4.5 一个简单的例子从零到看到页面五、Vite 的几个贴心功能5.1 路径别名告别 ../../../5.2 代理解决跨域问题5.3 环境变量区分开发和生产5.4 开箱即用的语言支持六、开发时 vs 上线时Vite 做了不一样的优化七、总结一个类比帮你记住你现在需要记住的一、从一个不对劲的地方说起学完 HTML、CSS、JavaScript 和 TypeScript 之后你可能已经习惯了这样的开发方式写一个 index.html 写一个 style.css 写一个 app.js或 app.ts 在浏览器里直接打开 index.html一切都很自然直到你开始接触 Vue、React 这些框架或者尝试在项目里引入第三方库——你会发现所有教程的开头都是同一句话npmcreate vitelatest然后你的项目就跑在一个http://localhost:5173的地址上不再是双击 HTML 文件打开了。为什么要多此一举Vite 到底在干什么这就是本文要回答的问题。二、Vite 帮你解决了什么问题2.1 问题一浏览器不认识 TypeScript 和 .vue 文件假设你写了一行 TypeScriptconstname:string小明;浏览器看到: string直接就报错了——浏览器只认识 JavaScript不认识 TypeScript。再比如 Vue 的单文件组件.vue文件里面template、script、style混在一起浏览器更不可能看懂。你需要一个工具把这些浏览器不认识的东西翻译成浏览器能认识的东西。Vite 就是干这个的。.ts 文件 → Vite 翻译 → .js 文件 → 浏览器 ✅ .vue 文件 → Vite 翻译 → .js .css → 浏览器 ✅ .scss 文件 → Vite 翻译 → .css 文件 → 浏览器 ✅2.2 问题二管理第三方库很麻烦当你需要引入一个第三方库比如axios发 HTTP 请求用的以前你可能会这样!-- 老办法下载一个 .js 文件放到项目里用 script 引入 --scriptsrc./lib/axios.min.js/script项目依赖的库多了以后版本管理、更新、引用顺序都会变成一团乱麻。Vite 让你可以用现代的方式管理依赖npminstallaxios# 一条命令安装// 在代码里直接 import不需要手动管理 script 标签importaxiosfromaxios;2.3 问题三写代码时需要实时预览你之前写代码的流程可能是修改代码 → 保存 → 切到浏览器 → 刷新页面 → 看效果页面一多来回切窗口、手动刷新效率很低。Vite 提供一个开发服务器它会自动监听文件变化文件一改浏览器自动刷新甚至不刷新整个页面只更新改了的那一小块代码出错时浏览器上直接显示错误信息你只需要保存代码看一眼浏览器就行了。2.4 问题四上线前需要打包优化写完项目后你的src/目录里可能有几十上百个文件还引入了好几 MB 的第三方库。直接把这些文件丢到服务器上访问速度会很慢。Vite 的build命令会把你的项目多个 JS 文件合并成少数几个文件压缩代码去掉空格、注释、缩短变量名优化图片和 CSS输出到一个干净的dist/文件夹这个文件夹才是你真正放到服务器上去的东西。三、Vite 到底是什么现在可以给一个定义了Vite 是一个前端开发工具它帮你做三件事开发时翻译代码并实时预览上线时打包优化代码。它本质上是一个开发服务器 构建工具┌─────────────────────────────────────────┐ │ Vite │ │ │ │ 开发时npm run dev │ │ ├── 启动一个本地服务器localhost:5173 │ │ ├── 实时翻译 TS/Vue/SCSS → JS/CSS/HTML │ │ ├── 监听文件变化自动刷新浏览器 │ │ └── 管理第三方依赖node_modules │ │ │ │ 上线时npm run build │ │ ├── 合并、压缩所有代码 │ │ ├── 处理图片、CSS 等资源 │ │ └── 输出到 dist/ 文件夹 │ └─────────────────────────────────────────┘为什么叫 ViteVite 是法语发音类似veet意思是快。它最大的特点就是快——启动快、修改代码后反应快。四、Vite 怎么用4.1 创建你的第一个 Vite 项目打开终端输入npmcreate vitelatest它会问你几个问题? Project name: › my-first-app # 项目名字随便起 ? Select a framework: › # 选框架Vue / React / 原生 ? Select a variant: › # 选语言TypeScript / JavaScript选完之后按提示操作cdmy-first-app# 进入项目目录npminstall# 安装依赖npmrun dev# 启动开发服务器终端会显示VITE v5.x.x ready in 300 ms ➜ Local: http://localhost:5173/浏览器打开这个地址你就看到了一个运行中的前端项目。4.2 项目目录长什么样my-first-app/ ├── index.html # 入口页面Vite 把它放在根目录 ├── package.json # 项目配置和依赖清单 ├── vite.config.ts # Vite 的配置文件 ├── public/ # 不需要处理的静态文件如图标 │ └── favicon.ico ├── src/ # 你的代码都在这里 │ ├── main.ts # 程序的入口文件 │ ├── App.vue # 根组件 │ ├── components/ # 放组件 │ ├── assets/ # 放需要处理的资源图片、样式等 │ └── style.css # 全局样式 └── node_modules/ # 第三方库安装在这不用手动管几个关键点index.html在根目录不在public/里。它通过script typemodule src/src/main.ts指定了程序入口src/是你写代码的地方所有源码放这里public/放不需要编译的文件比如网站图标Vite 会原样复制到输出目录node_modules/是第三方库的家你不需要进去看也不需要提交到 Git4.3 三个核心命令// package.json 中的 scripts{scripts:{dev:vite,// 启动开发服务器build:vite build,// 打包准备上线preview:vite preview// 本地预览打包后的效果}}npmrun dev# 开发时用 → 打开 http://localhost:5173 写代码npmrun build# 写完后用 → 生成 dist/ 文件夹npmrun preview# 上线前检查 → 预览 dist/ 里的东西是否正常一个典型的工作流npm run dev → 边写代码边看效果 代码写完了npm run build → 生成 dist/ 文件夹 npm run preview → 确认一下打包结果没问题 把 dist/ 文件夹部署到服务器上 → 上线4.4 配置文件入门vite.config.ts是 Vite 的配置文件。刚开始你不需要改它默认值就能用。但了解几个常用配置会有帮助import{defineConfig}fromviteimportvuefromvitejs/plugin-vueexportdefaultdefineConfig({plugins:[vue()],// 告诉 Vite 要处理 .vue 文件server:{port:3000,// 改成你想要的端口号默认 5173open:true,// 启动后自动打开浏览器},resolve:{alias:{:/src,// 设置路径别名以后可以用 /components/xxx 代替 ../../components/xxx},},})4.5 一个简单的例子从零到看到页面假设用 Vue TypeScript 模板创建一个项目后我们来理解一下代码是怎么跑起来的① index.html入口页面!DOCTYPEhtmlhtmllangenhead.../headbodydividapp/div!-- 关键用 ESM 方式引入入口文件 --scripttypemodulesrc/src/main.ts/script/body/html② src/main.ts程序入口import{createApp}fromvueimportAppfrom./App.vuecreateApp(App).mount(#app)// 创建一个 Vue 应用挂载到 index.html 里的 div idapp 上③ src/App.vue根组件template h1{{ message }}/h1 /template script setup langts const message: string Hello Vite! /script style scoped h1 { color: #42b883; } /style整个流程浏览器请求 index.html → 看到 script typemodule src/src/main.ts → 请求 /src/main.ts → Vite 把 main.ts 编译成 JS返回给浏览器 → 浏览器执行发现又 import 了 App.vue → 请求 /src/App.vue → Vite 把 .vue 文件拆成 JS CSS返回给浏览器 → 浏览器渲染出页面这一切都是自动的、按需的你只负责写代码。五、Vite 的几个贴心功能5.1 路径别名告别../../../// vite.config.ts 中配置resolve:{alias:{:/src,},}// 之前import Header from ../../../components/Header.vue// 之后importHeaderfrom/components/Header.vue5.2 代理解决跨域问题开发时前端跑在localhost:5173后端接口跑在localhost:8080浏览器会因为跨域阻止请求。Vite 可以帮你转发// vite.config.tsserver:{proxy:{/api:{target:http://localhost:8080,// 后端地址changeOrigin:true,}}}// 代码里直接写 /apiVite 会自动转发到 http://localhost:8080/apiconstresawaitfetch(/api/users);5.3 环境变量区分开发和生产# .env.development开发环境VITE_API_URLhttp://localhost:8080# .env.production生产环境VITE_API_URLhttps://api.myapp.com// 代码中直接使用console.log(import.meta.env.VITE_API_URL);// 开发时输出 http://localhost:8080// 打包后输出 https://api.myapp.com只有VITE_开头的变量才会暴露给前端代码防止你不小心把密钥泄露出去。5.4 开箱即用的语言支持你写的需要额外安装Vite 处理后的结果.ts文件不需要自动转成.js.scss/.less文件npm install sass自动转成.css.vue文件不需要拆成 JS CSS HTML导入图片import logo from ./logo.png不需要自动返回图片 URL六、开发时 vs 上线时Vite 做了不一样的优化这是一个重要的理解Vite 在开发时和上线时用的是不同的策略。开发时npm run dev上线时npm run build目标启动快改代码秒反应文件小加载快处理方式浏览器请求哪个文件就编译哪个一次性把所有文件编译打包代码不压缩保留可读性压缩、合并、混淆输出在内存中不写入硬盘输出到dist/文件夹为什么开发时不打包因为打包很慢。如果每次启动都要把所有文件打包一次等你项目大了可能得等几十秒。Vite 的做法是浏览器要什么我就给什么现要现编译。这样启动就是秒级的事。为什么上线时要打包因为用户访问你的网站时浏览器一次性下载几十个零散的小文件会很慢每个文件都是一次 HTTP 请求。打包后合并成几个大文件加载速度就快多了。七、总结一个类比帮你记住概念类比Vite你的私人开发助理npm run dev助理帮你搭好本地环境实时预览你的代码npm run build助理帮你把代码整理、压缩、打包准备发布vite.config.ts你告诉助理按这个规矩办事你现在需要记住的# 创建项目npmcreate vitelatest# 进入项目安装依赖cd项目名npminstall# 开始写代码npmrun dev# 写完了打包上线npmrun buildVite 本质上就是帮你解决了从写完代码到代码在浏览器里跑起来之间的所有麻烦事。你只管写代码剩下的事交给它。
