Vite ：从双击 HTML 到现代前端开发

勇往直前plus2026-07-28 11:10

目录

    • 一、从一个"不对劲"的地方说起
    • [二、Vite 帮你解决了什么问题](#二、Vite 帮你解决了什么问题)
      • [2.1 问题一：浏览器不认识 TypeScript 和 .vue 文件](#2.1 问题一：浏览器不认识 TypeScript 和 .vue 文件)
      • [2.2 问题二：管理第三方库很麻烦](#2.2 问题二：管理第三方库很麻烦)
      • [2.3 问题三：写代码时需要"实时预览"](#2.3 问题三：写代码时需要"实时预览")
      • [2.4 问题四：上线前需要"打包优化"](#2.4 问题四：上线前需要"打包优化")
    • [三、Vite 到底是什么](#三、Vite 到底是什么)
      • [为什么叫 Vite？](#为什么叫 Vite？)
    • [四、Vite 怎么用](#四、Vite 怎么用)
      • [4.1 创建你的第一个 Vite 项目](#4.1 创建你的第一个 Vite 项目)
      • [4.2 项目目录长什么样](#4.2 项目目录长什么样)
      • [4.3 三个核心命令](#4.3 三个核心命令)
      • [4.4 配置文件入门](#4.4 配置文件入门)
      • [4.5 一个简单的例子：从零到看到页面](#4.5 一个简单的例子：从零到看到页面)
    • [五、Vite 的几个贴心功能](#五、Vite 的几个贴心功能)
      • [5.1 路径别名（告别 `../../../`）](#5.1 路径别名（告别 ../../../）)
      • [5.2 代理（解决跨域问题）](#5.2 代理（解决跨域问题）)
      • [5.3 环境变量（区分开发和生产）](#5.3 环境变量（区分开发和生产）)
      • [5.4 开箱即用的语言支持](#5.4 开箱即用的语言支持)
    • [六、开发时 vs 上线时：Vite 做了不一样的优化](#六、开发时 vs 上线时：Vite 做了不一样的优化)
    • 七、总结

一、从一个"不对劲"的地方说起

学完 HTML、CSS、JavaScript 和 TypeScript 之后，你可能已经习惯了这样的开发方式：

复制代码 
写一个 index.html
写一个 style.css
写一个 app.js（或 app.ts）
在浏览器里直接打开 index.html

一切都很自然，直到你开始接触 Vue、React 这些框架，或者尝试在项目里引入第三方库------你会发现所有教程的开头都是同一句话：

bash 复制代码 
npm create vite@latest

然后你的项目就跑在一个 http://localhost:5173 的地址上，不再是双击 HTML 文件打开了。

为什么要多此一举？Vite 到底在干什么？

这就是本文要回答的问题。

二、Vite 帮你解决了什么问题

2.1 问题一：浏览器不认识 TypeScript 和 .vue 文件

假设你写了一行 TypeScript：

typescript 复制代码 
const name: string = "小明";

浏览器看到 : string 直接就报错了------浏览器只认识 JavaScript，不认识 TypeScript。

再比如 Vue 的单文件组件（.vue 文件），里面 <template>、<script>、<style> 混在一起，浏览器更不可能看懂。

你需要一个工具，把这些"浏览器不认识的东西"翻译成"浏览器能认识的东西"。Vite 就是干这个的。

复制代码 
.ts 文件    →  Vite 翻译  →  .js 文件   →  浏览器 ✅
.vue 文件   →  Vite 翻译  →  .js + .css  →  浏览器 ✅
.scss 文件  →  Vite 翻译  →  .css 文件   →  浏览器 ✅

2.2 问题二：管理第三方库很麻烦

当你需要引入一个第三方库，比如 axios（发 HTTP 请求用的），以前你可能会这样：

html 复制代码 
<!-- 老办法1：下载一个 .js 文件，放到项目里，用 <script> 引入 -->
<script src="./lib/axios.min.js"></script>

<!-- 老办法2 -->
<script type="module">
  // 用相对路径引用本地文件
  import axios from './lib/axios.min.js';
  
  axios.get('/api/user').then(res => console.log(res.data));
</script>

项目依赖的库多了以后，版本管理、更新、引用顺序都会变成一团乱麻。Vite 让你可以用现代的方式管理依赖：

bash 复制代码 
npm install axios    # 一条命令安装
typescript 复制代码 
// 在代码里直接 import，不需要手动管理 script 标签
import axios from 'axios';

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/ 文件夹                  │
└─────────────────────────────────────────┘

为什么叫 Vite？

Vite 是法语，发音类似"veet"，意思是"快"。它最大的特点就是快------启动快、修改代码后反应快。

四、Vite 怎么用

4.1 创建你的第一个 Vite 项目

打开终端，输入：

bash 复制代码 
npm create vite@latest

它会问你几个问题：

复制代码 
? Project name: › my-first-app        # 项目名字，随便起
? Select a framework: ›               # 选框架（Vue / React / 原生）
? Select a variant: ›                 # 选语言（TypeScript / JavaScript）

选完之后，按提示操作：

bash 复制代码 
cd my-first-app        # 进入项目目录
npm install            # 安装依赖
npm run 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 type="module" src="/src/main.ts"> 指定了程序入口
  • src/ 是你写代码的地方，所有源码放这里
  • public/ 放不需要编译的文件（比如网站图标），Vite 会原样复制到输出目录
  • node_modules/ 是第三方库的家，你不需要进去看，也不需要提交到 Git

4.3 三个核心命令

json 复制代码 
// package.json 中的 scripts
{
  "scripts": {
    "dev": "vite",               // 启动开发服务器
    "build": "vite build",       // 打包，准备上线
    "preview": "vite preview"    // 本地预览打包后的效果
  }
}
bash 复制代码 
npm run dev       # 开发时用 → 打开 http://localhost:5173 写代码
npm run build     # 写完后用 → 生成 dist/ 文件夹
npm run preview   # 上线前检查 → 预览 dist/ 里的东西是否正常

一个典型的工作流：

复制代码 
npm run dev                         → 边写代码边看效果
代码写完了，npm run build            → 生成 dist/ 文件夹
npm run preview                     → 确认一下打包结果没问题
把 dist/ 文件夹部署到服务器上        → 上线

4.4 配置文件入门

vite.config.ts 是 Vite 的配置文件。刚开始你不需要改它，默认值就能用。但了解几个常用配置会有帮助：

typescript 复制代码 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],          // 告诉 Vite 要处理 .vue 文件

  server: {
    port: 3000,              // 改成你想要的端口号（默认 5173）
    open: true,              // 启动后自动打开浏览器
  },

  resolve: {
    alias: {
      '@': '/src',           // 设置路径别名，以后可以用 @/components/xxx 代替 ../../components/xxx
    },
  },
})

4.5 一个简单的例子：从零到看到页面

假设用 Vue + TypeScript 模板创建一个项目后，我们来理解一下代码是怎么跑起来的：

① index.html（入口页面）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>
    <div id="app"></div>
    <!-- 关键：用 ESM 方式引入入口文件 -->
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

② src/main.ts（程序入口）

typescript 复制代码 
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
// 创建一个 Vue 应用，挂载到 index.html 里的 <div id="app"> 上

③ src/App.vue（根组件）

vue 复制代码 
<template>
  <h1>{{ message }}</h1>
</template>

<script setup lang="ts">
const message: string = 'Hello Vite!'
</script>

<style scoped>
h1 { color: #42b883; }
</style>

整个流程：

复制代码 
浏览器请求 index.html
  → 看到 <script type="module" src="/src/main.ts">
  → 请求 /src/main.ts
  → Vite 把 main.ts 编译成 JS，返回给浏览器
  → 浏览器执行，发现又 import 了 App.vue
  → 请求 /src/App.vue
  → Vite 把 .vue 文件拆成 JS + CSS，返回给浏览器
  → 浏览器渲染出页面

这一切都是自动的、按需的，你只负责写代码。

五、Vite 的几个贴心功能

5.1 路径别名（告别 ../../../）

typescript 复制代码 
// vite.config.ts 中配置
resolve: {
  alias: {
    '@': '/src',
  },
}
typescript 复制代码 
// 之前：import Header from '../../../components/Header.vue'
// 之后：
import Header from '@/components/Header.vue'

5.2 代理（解决跨域问题）

开发时前端跑在 localhost:5173，后端接口跑在 localhost:8080，浏览器会因为跨域阻止请求。Vite 可以帮你转发：

typescript 复制代码 
// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',   // 后端地址
      changeOrigin: true,
    }
  }
}
typescript 复制代码 
// 代码里直接写 /api，Vite 会自动转发到 http://localhost:8080/api
const res = await fetch('/api/users');

5.3 环境变量（区分开发和生产）

bash 复制代码 
# .env.development（开发环境）
VITE_API_URL=http://localhost:8080

# .env.production（生产环境）
VITE_API_URL=https://api.myapp.com
typescript 复制代码 
// 代码中直接使用
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 你告诉助理"按这个规矩办事"

你现在需要记住的

bash 复制代码 
# 创建项目
npm create vite@latest

# 进入项目，安装依赖
cd 项目名
npm install

# 开始写代码
npm run dev

# 写完了，打包上线
npm run build

Vite 本质上就是帮你解决了从"写完代码"到"代码在浏览器里跑起来"之间的所有麻烦事。你只管写代码，剩下的事交给它。

相关推荐
muddjsv1 小时前
CSS 高级选择器精讲：伪类、伪元素、逻辑伪类与选择器解耦规范
前端·css
HH‘HH1 小时前
前端应用的离线暂停更新策略：原理、实现与最佳实践
开发语言·前端·php
软件开发技术深度爱好者1 小时前
HTML5实现数学函数画图器
前端·javascript·html5
牧艺1 小时前
cos-design BubbleField：用 Canvas 做一个「会呼吸」的深海气泡场
前端·webgl·canvas
随风一样自由1 小时前
【前端+登录页】登录页背景性能优化实战：从 722 KB 到 200 KB，LCP 从 2.5s 到 1.2s
前端·性能优化·登录页·ttl·lcp
swipe1 小时前
09｜（前端转全栈）商品为什么不能随便上下架？后端状态机思维入门
前端·后端·全栈
taocarts_bidfans2 小时前
Taoify 站点访问地区限制与 IP 管控配置
前端·javascript·tcp/ip·taoify
狂师2 小时前
用自然语言控制手机，一条命令让 AI 帮你操作 Android 和 iOS 设备！
前端·开源·测试
Csvn2 小时前
# 🎨 CSS Container Queries 实战踩坑——从「响应式」到「容器式」
前端
热门推荐
01GitHub 镜像站点02如何新建文件夹？ 电脑新建文件夹的4种方法032026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片04AI科技热点日报 | 2026年07月01日05国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路072026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？082026 年 AI 大模型 & AI 编程工具实战全总结09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南