Vue-Pure-Admin 多环境部署完整指南：一套配置跑通本地到上线

Vue-Pure-Admin 多环境部署完整指南一套配置跑通本地到上线【免费下载链接】vue-pure-admin全面ESMVue3ViteElement-PlusTypeScript编写的一款后台管理系统兼容移动端项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-adminvue-pure-admin 是基于 Vue3 Vite TypeScript Element-Plus 的开源后台管理系统模板完全按 ESM 规范编写。这篇文章围绕「Vue-Pure-Admin 环境配置」讲一件实际的事同一份代码如何从本地开发、预发布一直平滑走到生产上线——包括.env文件怎么分工、构建脚本怎么切换模式、压缩与 CDN 开关怎么配、最后如何一键交给 Docker 发布。先看清楚这套环境体系能帮你管什么在动手之前先花 30 秒了解它覆盖了哪些面。所有行为都由根目录的四个环境文件和package.json里的脚本共同驱动能力控制项默认值生效环境本地端口VITE_PORT8848开发部署基础路径VITE_PUBLIC_PATH/全部路由模式VITE_ROUTER_HISTORYhash全部CDN 替换本地库VITE_CDNfalsestaging / production产物压缩VITE_COMPRESSIONnonestaging / production删除 console插件固定启用—生产构建依赖预构建optimizeDeps见 build/optimize.ts开发一句话概括开发管跑得快生产管包得小、发得出两者互不干扰。图系统登录页实际效果来自项目src/assets/login资源目录场景一四个环境文件的分工与类型转换 根目录下四个文件各司其职加载规则遵循 Vite 的约定.env.local个人覆盖.env.[mode].env公共兜底因此团队协作时个人差异可以放进不入库的本地文件里。文件生效时机关键变量.env所有模式VITE_PORT、VITE_HIDE_HOME官方注释明确此项只在.env配置.env.developmentpnpm devVITE_PUBLIC_PATH、VITE_ROUTER_HISTORY.env.productionpnpm build额外含VITE_CDN、VITE_COMPRESSION.env.staging--mode staging行为贴近生产但VITE_CDN true以生产环境文件为例核心内容只有几行VITE_PUBLIC_PATH / VITE_ROUTER_HISTORY hash VITE_CDN false VITE_COMPRESSION none这些值读进来后不会以字符串原样使用。build/utils.ts 里的wrapperEnv会做一次集中转换let realName envConf[envName].replace(/\\n/g, \n); realName realName true ? true : realName false ? false : realName; if (envName VITE_PORT) realName Number(realName);带来两个实际好处在 vite.config.ts 中直接解构出boolean/number不需要再手动转换每个变量都有兜底默认值如端口 8848、压缩 none、CDN false删错环境变量也不会让构建直接崩掉。场景二四条命令切换开发、构建、预发布与产物分析 环境切换不需要改代码靠--mode参数选对文件即可。package.json 里已经备好了四条脚本脚本模式内存上限特点pnpm devdevelopment4096MB热更新 mock code-inspector 定位源码pnpm buildproduction8192MB先rimraf dist构建后生成版本文件pnpm build:stagingstaging默认CDN 替换开启供预发布验证pnpm reportproduction默认额外产出report.html打包体积分析两点值得注意模式参数必须挂在vite build后面写成--mode staging写成vite build staging是无效命令会默默按生产构建。内存上限已经写死在脚本里开发 4GB、生产 8GB大项目 OOM 的概率被大幅压低这也是官方脚本里NODE_OPTIONS--max-old-space-size的用意。构建产物在 vite.config.ts 中按类型分了目录便于 CDN 配置缓存策略chunkFileNames: static/js/[name]-[hash].js, entryFileNames: static/js/[name]-[hash].js, assetFileNames: static/[ext]/[name]-[hash].[ext]图项目内真实图片资源示例与static/[ext]分类输出规则配合可按类型命中缓存场景三上线前的三个减重开关 生产构建时build/plugins.ts 会根据环境变量决定挂载哪些优化插件开关来源效果CDN 替换.env.staging中VITE_CDN truevue、element-plus、axios、echarts 等 7 个库改为外网加载本地包体显著缩小默认走国内 CDN也可在 build/cdn.ts 换成其他源压缩VITE_COMPRESSION支持gzip/brotli/both加-clear后缀则压缩后删除原始文件实现见 build/compress.ts移除 console生产构建固定启用自动剥离console.*但保留iconfont.js不受影响体积分析pnpm report时才启用生成report.html配合 brotli 尺寸统计建议的节奏日常pnpm build保稳上预发布用build:staging验证 CDN 链路体积吃紧时在.env.production打开brotli或both并给服务器开启对应解压缩。图pnpm report产出的分析数据可用于定位体积大户持续减重场景四Docker 一键发布跳过本地环境差异 仓库自带 Dockerfile采用构建 运行两段式FROM node:20-alpine as build-stage RUN pnpm install --frozen-lockfile COPY . . RUN pnpm build FROM nginx:stable-alpine as production-stage COPY --frombuild-stage /app/dist /usr/share/nginx/html EXPOSE 80流程很直白第一段装依赖并执行pnpm build锁定 lockfile 保证可复现第二段只把dist拷进 nginx 对外服务。发布时一条docker builddocker run -p 80:80即可不再依赖本机 Node 版本——本机要求 Node 22见package.json的engines而构建被容器隔离环境差异基本消失。高频坑与直接可用的解法⚠️ 按踩中频率排序的三个坑症状原因解法变量改了没生效缺少VITE_前缀、文件放错目录、开发服务未重启只认根目录下的.env*文件改完重启pnpm dev预发布构建行为像生产漏了--mode staging走了.env.production执行vite build --mode staging脚本build:staging已封装构建中途 OOM 报错复杂页面下 4GB 内存不够临时export NODE_OPTIONS--max-old-space-size8192后重试或直接用pnpm build另外提醒VITE_HIDE_HOME这类公共项按官方注释只放在.env里配置避免在多个模式文件中重复定义造成歧义。小结Vue-Pure-Admin 的多环境部署核心就是一条链四个.env文件定行为 →--mode选文件 → 构建脚本管内存 → 压缩/CDN/console 三开关瘦身 → Docker 消除环境差异。把这套配置吃透后从本地起服务到预发布、正式上线都可以用同一套流程复现。想动手实践的话直接把项目拉下来跑一遍git clone https://gitcode.com/GitHub_Trending/vu/vue-pure-admin【免费下载链接】vue-pure-admin全面ESMVue3ViteElement-PlusTypeScript编写的一款后台管理系统兼容移动端项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考