拓冰网站定制 
3 步配好 Vue-Pure-Admin 多环境部署从 .env 到可上线构建物【免费下载链接】vue-pure-admin全面ESMVue3ViteElement-PlusTypeScript编写的一款后台管理系统兼容移动端项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin读完这篇你会独立完成Vue-Pure-Admin 环境配置从.env文件到Vite 多环境构建再到按环境产出可上线的部署物也就是前端多环境部署的完整闭环。它基于 Vue3 Vite TypeScript Element-Plus整套配置其实只集中在两处——根目录的几个.env文件和build/目录下的几个构建脚本。你把这两处读懂剩下的只是照着命令跑。一、先搞懂环境是怎么被识别和加载的一切环境差异都源于 Vite 的mode模式概念。你可以把它理解成「当前这套构建要用哪份变量表」。它有三个入口pnpm dev默认mode developmentpnpm build默认mode production显式写--mode staging时才用staging。确定 mode 后Vite 会按「后加载覆盖先加载」的顺序读取根目录下的变量文件优先级从高到低是.env.[mode].local→.env.[mode]→.env.local→.env。这里的关键是.env是所有模式的兜底基线.env.[mode]放该模式专属值而带.local的文件通常写进.gitignore留给团队成员各自覆盖、不进版本库。具体到这个项目四个文件分工很清晰# .env基线所有模式都生效 VITE_PORT 8848 # 本地端口 VITE_HIDE_HOME false # 是否隐藏首页 # .env.development开发模式 VITE_PUBLIC_PATH / VITE_ROUTER_HISTORY hash # .env.production线上模式 VITE_PUBLIC_PATH / VITE_ROUTER_HISTORY hash VITE_CDN false # 线上不外部化依赖 VITE_COMPRESSION none注意两点变量名必须带VITE_前缀才会被注入到前端代码里另外mode 不等于NODE_ENV.env.staging里特意注释掉了NODE_ENV就是提醒你别混用这两者。二、配置如何写进构建wrapperEnv 与 vite.config.ts.env里的值读进来全是字符串但代码里要拿到数字、布尔。项目没有直接裸用而是在 build/utils.ts 里放了个wrapperEnv做一层类型收敛核心就这几步const wrapperEnv (envConf: Recordable): ViteEnv { const ret: ViteEnv { VITE_PORT: 8848, // 先给一组兜底默认值 VITE_PUBLIC_PATH: , VITE_ROUTER_HISTORY: , VITE_CDN: false, VITE_COMPRESSION: none }; for (const envName of Object.keys(envConf)) { let realName envConf[envName].replace(/\\n/g, \n); realName realName true ? true : realName false ? false : realName; if (envName VITE_PORT) realName Number(realName); // 端口转数字 ret[envName] realName; } return ret; };这里的设计有两层好处一是没配的变量有默认值不会因为漏写而报undefined二是字符串被自动纠正成true/false/数字让业务代码能拿到类型正确的配置。拿到的这套配置最终在 vite.config.ts 里被消费成 Vite 的真实字段const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } wrapperEnv(loadEnv(mode, root)); return { base: VITE_PUBLIC_PATH, // 部署的公共路径 server: { port: VITE_PORT, // .env 的 8848 落到这 host: 0.0.0.0 }, plugins: await getPluginsList(VITE_CDN, VITE_COMPRESSION), build: { target: es2015, sourcemap: false, chunkSizeWarningLimit: 4000 } };一句话概括数据流.env→loadEnv(mode)→wrapperEnv→vite.config.ts。所以你在抓开发服务器请求时能看到VITE_PORT 8848最终生效在Host上三、如何按环境产出构建物一条命令对应一套产物环境最终体现在 package.json 的scripts里每条命令对应一套产物你可以按需挑选{ dev: NODE_OPTIONS--max-old-space-size4096 vite, build: rimraf dist NODE_OPTIONS--max-old-space-size8192 vite build generate-version-file, build:staging: rimraf dist vite build --mode staging, report: rimraf dist vite build }开发pnpm dev起热重载服务内存给到 4GB 足够流畅。线上pnpm build先rimraf dist清旧产物再走production模式NODE_OPTIONS把堆上限抬到 8GB 应对大项目构建。预发布pnpm build:staging用--mode staging走.env.staging产物和线上行为基本一致适合上线前验证。体积报告pnpm report会额外生成一份report.html打包分析页用来排查哪块 bundle 偏大。这里的关键是rimraf dist每次构建前都清空输出目录避免旧文件混进新版本保证部署一致性。四、生产环境的两个开关CDN 与压缩真正的「按环境差异化」靠的是两个布尔/枚举开关它们在 build/plugins.ts 里被做成按需挂载的插件能力控制变量developmentstagingproduction依赖外部化CDNVITE_CDNfalse默认truefalse静态资源压缩VITE_COMPRESSIONnonenonenone去除consoleremoveConsole构建时生效构建时生效构建时生效打包体积分析npm_lifecycle_event仅report模式开启——CDNVITE_CDN ? cdn : null只有为true时才会把vue、element-plus等基础库换成外链换体积为运行时请求。预发布开着它做验证线上默认关掉稳妥优先。压缩configCompressPlugin(VITE_COMPRESSION)按取值产出gzip/brotli/both加-clear后缀还会删掉原始文件如gzip-clear默认none什么都不做需要时再打开。去 consoleremoveConsole是构建场景恒定挂载的且用external白名单保住了iconfont.js不被误删——这类「默认开、按例外关」的处理很值得借鉴。五、踩坑与自查环境变量不生效、构建内存不足、mode 传参错误问题多半出在这三类你可以对照下面逐条排。环境变量不生效的 3 步自查看前缀变量名是否以VITE_开头没前缀的不会被注入前端。看文件变量是否写在项目根目录对应的.env文件里写在子目录不会生效本地想覆盖就写.env.[mode].local。重启.env变更需要重启 dev server才加载热更新不会自动重新读环境文件。构建内存不足怎么调临时救急export NODE_OPTIONS--max-old-space-size8192把堆上限先抬上去。长期方案像本项目一样直接写进scriptsdev 给 4GB、build 给 8GB团队统一、不依赖个人环境。若仍 OOM先跑pnpm report看是不是某块依赖过大从源头优化比一味加内存更有效。mode 传参错误的正确姿势✅ 正确vite build --mode staging❌ 错误vite build staging把模式当位置参数Vite 不认识写对模式.env.staging才会被加载产物行为才会跟预期一致。下一步到这里从「mode 识别加载」→「类型转换写进构建」→「按环境出产物」→「生产开关」→「排错」这条主线就闭环了。想动手的话先把仓库拉到本地改一下.env.development里的VITE_PORT重启验证再分别跑pnpm build和pnpm build:staging对比dist你对这套多环境体系的印象会立刻从「概念」变成「手感」。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），仅供参考 3 步配好 Vue-Pure-Admin 多环境部署：从 .env 到可上线构建物
3 步配好 Vue-Pure-Admin 多环境部署从 .env 到可上线构建物【免费下载链接】vue-pure-admin全面ESMVue3ViteElement-PlusTypeScript编写的一款后台管理系统兼容移动端项目地址: https://gitcode.com/GitHub_Trending/vu/vue-pure-admin读完这篇你会独立完成Vue-Pure-Admin 环境配置从.env文件到Vite 多环境构建再到按环境产出可上线的部署物也就是前端多环境部署的完整闭环。它基于 Vue3 Vite TypeScript Element-Plus整套配置其实只集中在两处——根目录的几个.env文件和build/目录下的几个构建脚本。你把这两处读懂剩下的只是照着命令跑。一、先搞懂环境是怎么被识别和加载的一切环境差异都源于 Vite 的mode模式概念。你可以把它理解成「当前这套构建要用哪份变量表」。它有三个入口pnpm dev默认mode developmentpnpm build默认mode production显式写--mode staging时才用staging。确定 mode 后Vite 会按「后加载覆盖先加载」的顺序读取根目录下的变量文件优先级从高到低是.env.[mode].local→.env.[mode]→.env.local→.env。这里的关键是.env是所有模式的兜底基线.env.[mode]放该模式专属值而带.local的文件通常写进.gitignore留给团队成员各自覆盖、不进版本库。具体到这个项目四个文件分工很清晰# .env基线所有模式都生效 VITE_PORT 8848 # 本地端口 VITE_HIDE_HOME false # 是否隐藏首页 # .env.development开发模式 VITE_PUBLIC_PATH / VITE_ROUTER_HISTORY hash # .env.production线上模式 VITE_PUBLIC_PATH / VITE_ROUTER_HISTORY hash VITE_CDN false # 线上不外部化依赖 VITE_COMPRESSION none注意两点变量名必须带VITE_前缀才会被注入到前端代码里另外mode 不等于NODE_ENV.env.staging里特意注释掉了NODE_ENV就是提醒你别混用这两者。二、配置如何写进构建wrapperEnv 与 vite.config.ts.env里的值读进来全是字符串但代码里要拿到数字、布尔。项目没有直接裸用而是在 build/utils.ts 里放了个wrapperEnv做一层类型收敛核心就这几步const wrapperEnv (envConf: Recordable): ViteEnv { const ret: ViteEnv { VITE_PORT: 8848, // 先给一组兜底默认值 VITE_PUBLIC_PATH: , VITE_ROUTER_HISTORY: , VITE_CDN: false, VITE_COMPRESSION: none }; for (const envName of Object.keys(envConf)) { let realName envConf[envName].replace(/\\n/g, \n); realName realName true ? true : realName false ? false : realName; if (envName VITE_PORT) realName Number(realName); // 端口转数字 ret[envName] realName; } return ret; };这里的设计有两层好处一是没配的变量有默认值不会因为漏写而报undefined二是字符串被自动纠正成true/false/数字让业务代码能拿到类型正确的配置。拿到的这套配置最终在 vite.config.ts 里被消费成 Vite 的真实字段const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } wrapperEnv(loadEnv(mode, root)); return { base: VITE_PUBLIC_PATH, // 部署的公共路径 server: { port: VITE_PORT, // .env 的 8848 落到这 host: 0.0.0.0 }, plugins: await getPluginsList(VITE_CDN, VITE_COMPRESSION), build: { target: es2015, sourcemap: false, chunkSizeWarningLimit: 4000 } };一句话概括数据流.env→loadEnv(mode)→wrapperEnv→vite.config.ts。所以你在抓开发服务器请求时能看到VITE_PORT 8848最终生效在Host上三、如何按环境产出构建物一条命令对应一套产物环境最终体现在 package.json 的scripts里每条命令对应一套产物你可以按需挑选{ dev: NODE_OPTIONS--max-old-space-size4096 vite, build: rimraf dist NODE_OPTIONS--max-old-space-size8192 vite build generate-version-file, build:staging: rimraf dist vite build --mode staging, report: rimraf dist vite build }开发pnpm dev起热重载服务内存给到 4GB 足够流畅。线上pnpm build先rimraf dist清旧产物再走production模式NODE_OPTIONS把堆上限抬到 8GB 应对大项目构建。预发布pnpm build:staging用--mode staging走.env.staging产物和线上行为基本一致适合上线前验证。体积报告pnpm report会额外生成一份report.html打包分析页用来排查哪块 bundle 偏大。这里的关键是rimraf dist每次构建前都清空输出目录避免旧文件混进新版本保证部署一致性。四、生产环境的两个开关CDN 与压缩真正的「按环境差异化」靠的是两个布尔/枚举开关它们在 build/plugins.ts 里被做成按需挂载的插件能力控制变量developmentstagingproduction依赖外部化CDNVITE_CDNfalse默认truefalse静态资源压缩VITE_COMPRESSIONnonenonenone去除consoleremoveConsole构建时生效构建时生效构建时生效打包体积分析npm_lifecycle_event仅report模式开启——CDNVITE_CDN ? cdn : null只有为true时才会把vue、element-plus等基础库换成外链换体积为运行时请求。预发布开着它做验证线上默认关掉稳妥优先。压缩configCompressPlugin(VITE_COMPRESSION)按取值产出gzip/brotli/both加-clear后缀还会删掉原始文件如gzip-clear默认none什么都不做需要时再打开。去 consoleremoveConsole是构建场景恒定挂载的且用external白名单保住了iconfont.js不被误删——这类「默认开、按例外关」的处理很值得借鉴。五、踩坑与自查环境变量不生效、构建内存不足、mode 传参错误问题多半出在这三类你可以对照下面逐条排。环境变量不生效的 3 步自查看前缀变量名是否以VITE_开头没前缀的不会被注入前端。看文件变量是否写在项目根目录对应的.env文件里写在子目录不会生效本地想覆盖就写.env.[mode].local。重启.env变更需要重启 dev server才加载热更新不会自动重新读环境文件。构建内存不足怎么调临时救急export NODE_OPTIONS--max-old-space-size8192把堆上限先抬上去。长期方案像本项目一样直接写进scriptsdev 给 4GB、build 给 8GB团队统一、不依赖个人环境。若仍 OOM先跑pnpm report看是不是某块依赖过大从源头优化比一味加内存更有效。mode 传参错误的正确姿势✅ 正确vite build --mode staging❌ 错误vite build staging把模式当位置参数Vite 不认识写对模式.env.staging才会被加载产物行为才会跟预期一致。下一步到这里从「mode 识别加载」→「类型转换写进构建」→「按环境出产物」→「生产开关」→「排错」这条主线就闭环了。想动手的话先把仓库拉到本地改一下.env.development里的VITE_PORT重启验证再分别跑pnpm build和pnpm build:staging对比dist你对这套多环境体系的印象会立刻从「概念」变成「手感」。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），仅供参考