Vite 介绍
Vite 是什么
Vite 是一个下一代前端构建工具，由尤雨溪（Vue 的作者）开发，专注于极速的开发体验和高效的构建性能。它最初是为 Vue 设计的，但现在已经支持包括 Vue、React、Svelte、Lit、Preact 等主流框架。
Vite 采用现代浏览器原生支持的 ES Modules（ESM）特性，实现了比传统工具（如 Webpack、Parcel）更快的冷启动、更轻的热更新、更小的构建体积。
使用 Vite
创建一个 Vite 的 Vue 项目 // Vue3 + Vite + ts + pnpm
pnpm create vite@latest my-app --template vue-ts目录结构介绍
my-apppublicvite.svg # 作用：静态资源文件目录，public 中的文件不会被 Vite 处理（例如压缩、转码等）。放这里的资源可以通过 URL 直接访问，如：/vite.svg。常用于 favicon、logo、robots.txt 等文件。src # 核心源码目录assets # 存放项目中使用的静态图片资源。这些资源会被 Vite 打包处理，支持模块引入（例如 import logo from '@/assets/vue.svg'）。可以放置图片、字体、全局样式等。vue.svgcomponents # 存放可复用的 Vue 组件。HelloWorld.vue 是 Vite 脚手架自动生成的演示组件。未来你可以放置像 Header.vue、Table.vue 这种通用组件。HelloWorld.vueApp.vue # Vue 应用的根组件（Root Component）。通常负责页面的基本布局和 <router-view /> 等全局结构。是整个应用组件树的顶层。main.ts # 应用的入口文件。通常在这里完成：创建 app、挂载到 DOM、引入全局样式、使用插件（如 Pinia、Router）等。style.css # 全局样式文件。可在这里定义基本的全局样式、字体、颜色等。可以改为使用 .scss 或放入 src/styles/。vite-env.d.ts # 是 Vite 提供的 TypeScript 类型声明文件，用于支持 .vue 文件和一些 Vite 插件功能的类型检查。不建议删除，除非你自己手动声明了相关类型。index.html # HTML 模板文件，是最终构建时的基础页面。在这里 Vite 会注入打包后的 JS/CSS。你可以设置 <title>、meta、CDN、全局 CSS 引入等。package.json # 项目的依赖配置文件。定义了依赖包、项目名、版本、运行脚本等。tsconfig.app.json # 配置专门用于项目运行时编译设置。通常用于前端代码，包括类型检查、模块解析等。tsconfig.json # TypeScript 的主配置文件。一般只包含最基础的设置，比如扩展其他配置文件（如 tsconfig.app.json）。tsconfig.node.json # 配置用于 Node.js 环境（如 Vite 配置文件、脚本工具等）。分离的原因是 Node 环境和浏览器环境的类型支持不完全一致。vite.config.ts # Vite 的配置文件。你可以在这里配置：路径别名（如 @）、插件（如 Vue、Pinia、AutoImport）、打包优化（压缩、chunk 拆分）、跨域代理等启动项目
pnpm install # 安装依赖
pnpm dev # 启动开发服务器vite.config.ts 文件介绍
vite.config.ts 是 Vite 项目的核心配置文件，用于控制 Vite 在 开发、构建、预览等过程中的行为。你可以在里面配置插件、路径别名、开发服务器、构建选项等。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vite.dev/config/
export default defineConfig({plugins: [vue()],
})
vite.config.ts 的用法
plugins 的用法
plugins: [vue()] 是 Vite 配置文件中的一行，意思是：给 Vite 添加一个 Vue 插件，让它能识别和处理 .vue 文件。如果使用 react，这里就是 plugins: [react()]
也可以如下写法，添加其他插件
plugins: [vue(), // Vue 插件vueJsx(), // Vue JSX 插件（可选）autoImport(), // 自动导入插件components({ dirs: ['src/components'] }) // 自动注册组件
]
vueJsx
支持在 Vue 3 项目中使用 JSX（类似 React 写法）语法写组件。
autoImport
自动帮你引入常用函数和组件，减少你手动写 import 语句。
示例：例如 Vue 里的 ref, computed, watch 等函数，平时你要写如下导入语句
import { ref, computed } from 'vue'使用 autoImport 插件后可以省略上面的导入语句直接用，插件自动帮你补上导入。
也支持自动导入 Vue Router、Pinia、Element Plus 等库的 API。
components
自动扫描你指定目录下的 Vue 组件（比如 src/components），让你在模板里直接用组件名，无需手动 import 和 components 注册。
示例：你有个 src/components/MyButton.vue 组件。你可以直接在其他 .vue 文件写：
<template><MyButton />
</template>
不需要再写
import MyButton from '@/components/MyButton.vue'
export default { components: { MyButton } }resolve 的用法
配置路径解析（常用于别名 alias）
import { fileURLToPath, URL } from 'node:url'resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url)) // 使用 @ 代表 src 目录}
}
如上配置，你就在项目中使用 @ 符合，这样写
import Hello from '@/components/Hello.vue'而不用写 很长的 ../../../components/Hello.vue
server 的用法
配置代理服务器
server: {port: 3000, // 设置开发服务器的端口号，默认3000。前端通过 http://localhost:3000 访问open: true, // 启动开发服务器时，是否自动在默认浏览器中打开页面，true 表示打开https: false, // 是否启用 HTTPS 协议。如果为 true，会使用 HTTPS 协议启动开发服务器。若为 true，需提供 SSL 证书和密钥proxy: { // 代理配置，用于解决跨域请求问题，把某些请求代理到目标服务器'/api': { // 匹配以 /api 开头的请求路径target: 'http://localhost:8080', // 目标代理服务器地址，把匹配到的请求转发到这个地址changeOrigin: true, // 是否修改请求头中的 origin 字段，设置为 true 有利于服务器接受请求（伪装成同源）rewrite: path => path.replace(/^\/api/, '') // 重写路径，去掉请求路径中的 /api 前缀}}
}
build 的用法
生产构建配置
build: {outDir: 'dist', // 构建输出目录，默认是 'dist'，打包后文件会放在这里sourcemap: true, // 是否生成 source map 文件，方便调试和定位代码minify: 'esbuild', // 代码压缩工具，默认是 esbuild（快速），也可以用 terser（体积更小，支持更多压缩选项）rollupOptions: { // Rollup 打包的高级配置output: {manualChunks: { // 手动拆分代码块，把指定模块单独打包，方便缓存和复用vendor: ['vue', 'vue-router'] // 把 vue 和 vue-router 拆分成一个名为 vendor 的 chunk}}}
}define 的用法
定义全局常量
define: {__APP_VERSION__: JSON.stringify('1.0.0'),__IS_DEV__: true
}
可以直接在 代码中使用 console.log(__APP_VERSION__)
envPrefix 的用法
环境变量前缀
envPrefix: ['VITE_', 'APP_'] // 同时允许 VITE_ 和 APP_ 前缀的变量注入Vite 默认的 envPrefix 是 'VITE_'，意味着只有以 VITE_ 开头的环境变量，才会被注入进你的代码里。例如
VITE_API_URL=https://api.example.com
API_SECRET=abcdefg
import.meta.env.VITE_API_URL 可以读取到值
import.meta.env.API_SECRET 是 undefined，不会注入
css 的用法
CSS 相关配置
css: {preprocessorOptions: {scss: {// 全局 SCSS 变量additionalData: `@use "@/styles/variables.scss" as *;`,},},
},这样配置，和在 main.ts 中 import '@/styles/variables.scss'; 有什么区别？
| 方面 | additionalData 自动注入 SCSS | import 全局引入 SCSS 文件 |
|---|---|---|
| 注入时机 | 每个单独的 SCSS 文件编译时自动注入 | 入口文件中引入，样式只加入一次 |
| 作用范围 | 变量、mixin、函数等共享定义 | 具体样式规则，页面中实际生效的样式 |
| 使用目的 | 共享变量和代码，不产生重复 CSS | 添加全局样式（重置、布局、字体等） |
| 是否生成重复代码 | 不会生成重复 CSS 代码 | 样式内容会被实际打包输出 |
| 需要手动 import 吗 | 不需要 | 需要手动 import |
如果你只是想在多个 SCSS 文件中共享变量、mixin，推荐用 additionalData 方式。
如果你想引入真正的全局样式文件，让样式生效，要在 main.ts 里 import 一次。
两者可以同时使用，分别满足不同需求。
base 的用法
设置基础路径
base: '/myapp/'如果你的项目部署在 https://example.com/myapp/，就要设置 base
默认是 '/'
tsconfig.json 文件介绍
这个不是 Vite 的，这个属于 TypeScript 的，详情介绍请查看：tsconfig.json
Vite 构建命令
启动开发服务器
vite
# 或者
vite dev给生成环境打包 // 输出到默认的 dist 目录
vite buildvite build 常用构建参数
| 参数 | 说明 | 默认值 |
|---|---|---|
--mode <mode> | 指定构建模式，读取 .env.[mode] 环境变量文件 | production |
--outDir <dir> | 指定输出目录 | dist |
--base <publicPath> | 设置基础公共路径 | / |
--watch | 开启构建时监听文件变动，适合调试 | 关闭 |
--emptyOutDir | 构建前清空输出目录 | true |
--sourcemap | 生成 source map 文件 | 关闭 |
--minify <boolean> | 是否压缩代码，支持 true / false / "esbuild" / "terser" | "esbuild" |
--target <string> | 编译目标环境，如 es2015、modules | modules |
--assetsDir <dir> | 指定静态资源目录 | assets |
示例：
构建项目，指定环境为 test：
vite build --mode test构建并输出到 build 目录，不压缩：
vite build --outDir build --minify false构建并开启源码映射：
vite build --sourcemap
构建不同的环境， --mode xxx 项目根目录要有对应的 .env.xxx 配置文件
"scripts": {"dev": "vite --mode dev","test": "vite build --mode test","build": "vite build --mode pro","preview": "vite preview"
},