第二十八节进阶Vite 项目打包、多环境区分、打包优化与部署实操本节目标分清开发 / 测试 / 生产三套环境变量文件完善 request 请求工具根据环境自动切换接口地址vite 配置打包优化拆分 chunk、去除 console、压缩资源执行打包命令生成 dist 产物dist 本地预览、nginx 部署关键配置、部署踩坑处理步骤 1环境变量文件说明Vite 识别以.env开头的文件放在项目根目录.env所有环境通用.env.development开发环境pnpm dev.env.production生产环境pnpm build变量必须以VITE_作为前缀才可以在代码中import.meta.env.VITE_XXX获取。① .env.development开发环境mock 开启# .env.development VITE_APP_TITLEVue3后台管理系统(开发) VITE_API_BASE_URL/api VITE_MOCKtrue② .env.production生产环境关闭 mock真实后端地址# .env.production VITE_APP_TITLEVue3后台管理系统 VITE_API_BASE_URL/prod-api VITE_MOCKfalse③ src/utils/request.js 请求工具读取环境变量import axios from axios import { ElMessage } from element-plus import { useUserStore } from /stores/user const service axios.create({ // ✅读取环境变量接口地址 baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000 }) // 请求拦截器 service.interceptors.request.use(config { const userStore useUserStore() if(userStore.token){ config.headers.Authorization Bearer ${userStore.token} } return config }) //响应拦截器 service.interceptors.response.use( res{ return res.data }, err{ ElMessage.error(err.message || 请求失败) return Promise.reject(err) } ) export default service步骤 2vite.config.ts 打包优化配置import { defineConfig } from vite import vue from vitejs/plugin-vue import { resolve } from path // mock插件 import { viteMockServe } from vite-plugin-mock export default defineConfig(({mode}){ // 判断是否生产环境 const isProd mode production return { plugins: [ vue(), viteMockServe({ mockPath:src/mock, // ✅生产环境关闭mock enable: !isProd import.meta.env.VITE_MOCK true }) ], resolve:{ alias:{ : resolve(__dirname,src) } }, build:{ // 打包输出目录 outDir:dist, // 打包清除console和debugger dropConsole: true, dropDebugger:true, // 分包策略拆分第三方库避免单js文件过大 rollupOptions:{ output:{ manualChunks:{ //把大依赖单独拆分 vue-vendor: [vue,vue-router,pinia], element-plus:[element-plus], echarts:[echarts] } } } } } })关键点生产环境自动关闭 mock打包删除控制台打印分包切割大库减少单包体积提升页面首屏加载速度。步骤 3package.json 脚本命令{ scripts: { dev: vite, build: vite build, preview: vite preview } }执行打包pnpm build执行完成根目录生成dist文件夹就是最终部署产物。本地预览打包产物pnpm preview本地模拟服务器打开 dist验证打包之后页面功能是否正常。步骤 4Nginx 部署配置重点history 模式刷新 404 问题我们路由使用createWebHistory()history 模式直接打开 dist/index.html 会报跨域、路由丢失必须用 web 服务器nginx 配置如下。server { listen 80; server_name localhost; # 打包后的dist目录路径 root D:/web/dist; index index.html; # history模式关键配置解决刷新页面404 location / { try_files $uri $uri/ /index.html; } # 代理后端接口 location /prod-api/ { proxy_pass http://后端真实接口地址/; } }部署常见坑刷新页面 404缺少try_files $uri $uri/ /index.html;配置history 模式必须配置。接口 404确认 nginx 代理/prod-api指向后端服务地址。mock 打包后失效viteMockServeenable生产环境关闭打包不会打入 mock 代码。静态资源路径错误vite 默认相对路径不要手动修改base除非部署在子目录。如果部署在子目录例如http://xxx/adminvite.config 配置base:/admin/。✅测试清单执行pnpm dev开发环境读取.env.development使用 mock 接口。执行pnpm build生成 dist 目录无打包报错。pnpm preview预览 dist页面、路由、按钮权限、图表全部正常。nginx 部署后页面刷新不会出现 404接口正常请求后端。本项目完整学习总结我们从零搭建仿若依 Vue3 后台管理系统完整链路项目初始化目录结构规划router 路由、Pinia 状态管理、Axios 二次封装mock 模拟后端接口layout 布局、侧边栏菜单、面包屑、标签页用户管理 CRUD 页面useTableSearch 组合式封装Echarts 图表工作台页面v‑perm 自定义指令按钮权限路由守卫、动态路由、401/404 异常页面vite 多环境、打包优化、nginx 部署到此整套后台管理系统基础版本全部开发完毕。