uni-app H5 指定环境发布编译问题

根据你的描述，这是一个典型的 uni-app H5 环境变量编译问题。核心在于“指定环境发布”时，环境变量（如 process.env.NODE_ENV 或自定义的 process.env.VUE_APP_*）没有在编译阶段被正确注入和替换，导致运行时获取的是默认值或未定义的值。

问题分析：

1. 运行与发布的差异：

   • 指定环境运行：通过 npm run dev:h5 -- --mode=your_env 或 CLI 选择环境运行时，Webpack 的 DefinePlugin 会在开发服务器内存中正确地将环境变量替换为对应的常量值。因此 request.js 中通过 process.env.xxx 获取的值是正确的。
   • 指定环境发布：当你通过 HBuilderX 的“发布”->“自定义发行”->选择环境进行打包时，关键在于这个“环境”选择是否成功触发了对应模式的 Webpack 构建配置。从你的描述看，打包后的代码中，环境变量相关代码（如 process.env.VUE_APP_API_BASE）可能没有被静态替换为具体的字符串，而是保留了变量名或变成了默认值（如 /）。这导致在浏览器中运行时，process.env 对象是未定义的或只有基础属性，从而拼接出错误的 URL（localhost 或当前域名）。

2. 可能的原因：

   • 环境配置文件缺失或未匹配：项目根目录下必须有与环境名对应的配置文件（如 .env.your_env），并在其中定义 VUE_APP_API_BASE=https://your.api.domain 等变量。HBuilderX 的“选择环境”操作应该对应 --mode=your_env 参数。
   • HBuilderX 自定义发行配置问题：有时 GUI 操作传递的参数可能未正确生效。可以尝试改用命令行打包进行对比测试：npm run build:h5 -- --mode=your_env。
   • 代码中引用方式问题：确保在 request.js 中，环境变量仅在顶层用于生成配置常量，而不是在运行时函数中动态读取 process.env。例如：

     // 正确：在编译时会被替换
     const BASE_URL = process.env.VUE_APP_API_BASE || '/';
     export default {
         baseURL: BASE_URL,
     }
     // 错误：运行时 process.env 可能不存在
     export function getBaseUrl() {
         return process.env.VUE_APP_API_BASE; // 风险点
     }
     

解决方案：

1. 检查环境配置文件：确认项目根目录存在 .env.your_env 文件，且内容正确（如 VUE_APP_API_BASE=https://api.example.com）。
2. 验证打包命令：在项目目录下打开终端，执行 npm run build:h5 -- --mode=your_env（将 your_env 替换为你的环境名），检查生成的 /dist/build/h5 目录下的代码。搜索 VUE_APP_API_BASE，应该已经被替换为配置文件中的具体字符串。如果命令行打包正常，则是 HBuilderX 发行配置问题。
3. 检查 HBuilderX 发行配置：在 package.json 中检查 scripts 是否正确定义了 build:h5。HBuilderX 的“自定义发行”应调用相同的脚本。
4. 使用条件编译：如果环境变量问题难以解决，对于 H5 平台，可以考虑使用 uni-app 的条件编译来硬编码不同环境的 URL，虽然不够优雅，但更稳定。例如：

   let baseURL;
   // #ifdef H5
   baseURL = 'https://h5.api.example.com';
   // #endif
   // #ifdef MP-WEIXIN
   baseURL = 'https://mp.api.example.com';
   // #endif