uniapp cli 打包命令如何配置

在使用uniapp-cli进行打包时，具体的配置命令是什么？我在官方文档中看到了相关的说明，但是实际操作时遇到了一些问题。比如如何指定打包平台（H5/小程序/App），是否需要额外配置manifest.json或vue.config.js？能否提供一个完整的打包命令示例？另外，打包后的输出目录和文件结构是怎样的？希望有经验的朋友能详细解答一下。

2 回复

在项目根目录下的 package.json 文件中配置 scripts 字段，例如：

"scripts": {
  "build:app": "uni build --platform app"
}

然后在终端运行 npm run build:app 即可打包。


在 UniApp CLI 项目中，打包命令主要通过 package.json 中的 scripts 字段配置，结合 Vue CLI 或自定义构建选项实现。以下是具体配置方法：

1. 基础打包命令配置

在 package.json 的 scripts 中预设常用命令：

{
  "scripts": {
    "build:app": "uni build -p app",          // 打包App
    "build:h5": "uni build -p h5",            // 打包H5
    "build:mp-weixin": "uni build -p mp-weixin" // 打包微信小程序
  }
}

运行命令示例：

npm run build:app    # 执行App打包

2. 自定义环境变量

通过 --mode 指定环境（需提前在项目根目录创建 .env.[mode] 文件）：

{
  "scripts": {
    "build:prod": "uni build -p h5 --mode production",
    "build:test": "uni build -p mp-weixin --mode staging"
  }
}

环境文件示例（.env.production）：

VUE_APP_API_BASE=https://api.example.com

3. 平台特定配置

在 vue.config.js 中扩展构建选项（如输出路径、静态资源处理）：

module.exports = {
  // H5平台配置
  h5: {
    publicPath: '/custom-path/',
    devServer: { port: 3000 }
  },
  // 微信小程序配置
  mp-weixin: {
    // 小程序特有设置
  }
}

4. 高级参数

使用 CLI 参数调整行为：

uni build -p h5 --dest ./dist/custom   # 指定输出目录
uni build -p app --auto-prefix false   # 禁用自动CSS前缀

注意事项：

  • 确保已安装 @dcloudio/uni-cli-shared 和 @dcloudio/uni-mp-* 等平台依赖。
  • 跨平台差异需通过条件编译处理（如 #ifdef H5）。
  • 生产环境打包前建议执行 uni build --watch 测试构建结果。

通过以上配置，可灵活适配多平台打包需求。

回到顶部