前端学习笔记（15）Vue 使用Vite构建项目

笔记：【Vue使用Vite构建项目】

2026年5月19日 22:57

平时主要接触vue2的项目，之前对webpack的相关知识也做了梳理。
webpack相比之前初学vue3时用的vite，还是相对慢了点。
比如npm run dev启动开发服务器，项目大点要30~60秒左右。
今天决定深入下之前接触过的vite构建工具。

概述

• Vite 是 Vue3 官方推荐的构建工具，替代 Webpack/vue-cli
• 核心原理：
  • 开发环境利用浏览器原生 ES Modules，跳过打包
  • 生产环境用 Rollup 打包
• 开发服务器启动毫秒级（不打包），热更新毫秒级（只更新变更模块）
• Vue2 项目用 Webpack/vue-cli，Vue3 项目用 Vite

如何创建一个新项目

# 创建 Vue3 项目（官方推荐，会配置好 Router/Pinia/ESLint）npmcreate vue@latest# 或用 vite 直接创建（更轻量，需要手动配置）npmcreate vite@latest my-vue-app ----templatevuenpmcreate vite@latest my-vue-app ----templatevue-ts

配置文件 vite.config.js

Vite 的配置文件，对应 Webpack 体系下的 vue.config.js

import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{fileURLToPath,URL}from'node:url'exportdefaultdefineConfig({// 1. 插件plugins:[vue(),],// 2. 路径别名resolve:{alias:{'@':fileURLToPath(newURL('./src',import.meta.url))}},// 3. 开发服务器server:{port:3000,// 端口host:'0.0.0.0',// 允许外部访问open:true,// 启动时打开浏览器cors:true,// 跨域proxy:{// 代理（解决接口跨域）'/api':{target:'http://localhost:8080',changeOrigin:true,rewrite:(path)=>path.replace(/^\/api/,'')}}},// 4. 构建配置build:{outDir:'dist',// 输出目录assetsDir:'assets',// 静态资源目录sourcemap:false,// 是否生成 sourcemapminify:'esbuild',// 压缩方式（默认 esbuild，可选 terser）chunkSizeWarningLimit:500,// chunk 大小警告阈值rollupOptions:{// Rollup 配置output:{manualChunks:{// 手动分包'vendor':['vue','vue-router','pinia'],'element-plus':['element-plus']}}}},// 5. 环境变量前缀envPrefix:'VITE_',// 6. CSS 配置// 把variables.scss里的样式，注入每一个vue文件css:{preprocessorOptions:{scss:{additionalData:`@use "@/styles/variables.scss" as *;`}}}})

常用的import包

importvuefrom'@vitejs/plugin-vue'// 核心，支持 .vue 单文件组件importAutoImportfrom'unplugin-auto-import/vite'// Vue API 自动导入（ref、computed 等）importComponentsfrom'unplugin-vue-components/vite'// Element-Plus 等组件自动按需导入// 写在 plugins 数组中AutoImport({resolvers:[ElementPlusResolver()],imports:['vue','vue-router','pinia']// 自动导入 ref, reactive, computed 等，无需手动 import}),Components({resolvers:[ElementPlusResolver()]// 自动导入 el-table, el-button 等组件，无需手动 import})

环境变量

类似webpack，vite也对不同环境（开发/生产/测试）有不同的配置文件：

• .env# 所有环境生效
• .env.development# npm run dev 时生效
• .env.production# npm run build 时生效
• .env.staging# 自定义环境，通过 --mode staging 指定

.env文件的变量命名，需要遵守VITE_XXX的规范（这个前缀是上面配置文件的第五个部分配的）

# 只有 VITE_ 开头的变量才会暴露给前端代码VITE_API_BASE=http://localhost:8080VITE_APP_TITLE=My App# 非 VITE_ 开头的变量只在 Node 端可用，前端无法访问SECRET_KEY=xxx# 前端访问不到

这些变量的使用，要import.meta.env.XXX：

console.log(import.meta.env.VITE_API_BASE)// 自定义变量console.log(import.meta.env.VITE_APP_TITLE)// 自定义变量console.log(import.meta.env.MODE)// 当前模式：development / productionconsole.log(import.meta.env.DEV)// 是否开发环境（布尔值）console.log(import.meta.env.PROD)// 是否生产环境（布尔值）console.log(import.meta.env.BASE_URL)// 部署基础路径

vite的命令

和webpack基本一样

# 开发服务器npmrun dev# 生产构建npmrun build# 预览生产构建（本地模拟生产环境）npmrun preview

pnpm

另外，最近还看到有项目是用pnpm构建的。
pnpm是npm的升级替代，命令有少许语法差异，核心优势是快和省空间。
pnpm的包，是整个硬盘里存一份，然后每个项目用硬链接指向这一份。

教学文档项目，一般我是pnpm docs:preview打开。
这个命令，是类似宏的，写在tutorial\crrg-uac-front\package.json文件。
比如preview，实际上是pnpm build:local && vite preview这一串。