第二十八节：进阶：Vite 项目打包、多环境区分、打包优化与部署实操-平芜编程栈

第二十八节：进阶：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_TITLE=Vue3后台管理系统(开发) VITE_API_BASE_URL=/api VITE_MOCK=true

② .env.production（生产环境，关闭 mock，真实后端地址）

# .env.production VITE_APP_TITLE=Vue3后台管理系统 VITE_API_BASE_URL=/prod-api VITE_MOCK=false

③ 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

步骤 2：vite.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，打包删除控制台打印，分包切割大库，减少单包体积，提升页面首屏加载速度。

步骤 3：package.json 脚本命令

{ "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" } }

执行打包

pnpm build

执行完成根目录生成dist文件夹，就是最终部署产物。

本地预览打包产物

pnpm preview

本地模拟服务器打开 dist，验证打包之后页面功能是否正常。

步骤 4：Nginx 部署配置（重点！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://后端真实接口地址/; } }