uni-app 缺少打包输出目录的配置项 无法配置输出到h5目录

uni-app 缺少打包输出目录的配置项 无法配置输出到h5目录

操作步骤：

  • 升级HBuilderX至最新版本，打包，使用更新脚本更新包，环境无法访问。

预期结果：

  • 提供发布目录的配置项，值可以默认为web，但需要提供修改回h5的能力。
  • 注：部分依赖该路径的CLI、插件，也需要读取这个配置项以确保工作正常。

实际结果：

  • 无法修改配置项，打包后环境异常。

bug描述：

运维反馈，线上项目无法访问，经过排查，是打包后的文件夹名称变化导致。 由于涉及的项目非常多，自动化的脚本也非常多，运维没办法修改（开发的事项应当尽可能在开发层面解决）。 找了很久没有找到配置目录名称的地方，只有论坛上了解到的信息。 参考链接：

请尽快增加发行目录的配置项。

另：出现此类会影响生产环境使用的Breaking Change时，更新说明应当在明显的区域给出加重的提示。

临时方案：

  1. 降级HBuilderX到3.99.202312261
  2. 打包后，手动解压缩，重命名为h5后重新再压缩

Image


| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Windows  | win11  | HBuilderX    |

更多关于uni-app 缺少打包输出目录的配置项 无法配置输出到h5目录的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 缺少打包输出目录的配置项 无法配置输出到h5目录的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，默认情况下，打包输出的目录是 dist，并且这个目录下会有多个子目录，例如 build/h5、build/mp-weixin 等，分别对应不同的平台。如果你想要将 H5 的打包输出目录配置到特定的目录，可以通过以下方式实现。

1. 修改 vue.config.js 文件

uni-app 基于 Vue CLI，因此你可以通过修改 vue.config.js 文件来配置输出目录。在项目根目录下创建或修改 vue.config.js 文件，添加以下内容：

const path = require('path');

module.exports = {
  outputDir: path.resolve(__dirname, 'dist/h5'), // 设置输出目录为 dist/h5
  // 其他配置项...
};

2. 使用环境变量

你也可以通过环境变量来动态设置输出目录。例如，在 package.json 中配置不同的构建命令：

{
  "scripts": {
    "build:h5": "cross-env OUTPUT_DIR=dist/h5 uni-build",
    "build:mp-weixin": "cross-env OUTPUT_DIR=dist/mp-weixin uni-build"
  }
}

然后在 vue.config.js 中读取这个环境变量：

const path = require('path');

module.exports = {
  outputDir: process.env.OUTPUT_DIR || 'dist', // 默认输出目录为 dist，如果设置了环境变量则使用环境变量的值
  // 其他配置项...
};

3. 使用 process.env.UNI_OUTPUT_DIR

uni-app 提供了一个环境变量 process.env.UNI_OUTPUT_DIR，你可以在 vue.config.js 中使用它来动态设置输出目录：

const path = require('path');

module.exports = {
  outputDir: process.env.UNI_OUTPUT_DIR || 'dist', // 默认输出目录为 dist，如果设置了 UNI_OUTPUT_DIR 则使用它的值
  // 其他配置项...
};

然后在构建命令中设置 UNI_OUTPUT_DIR：

{
  "scripts": {
    "build:h5": "cross-env UNI_OUTPUT_DIR=dist/h5 uni-build",
    "build:mp-weixin": "cross-env UNI_OUTPUT_DIR=dist/mp-weixin uni-build"
  }
}
回到顶部