vue-cli-plugin-h-uni-build ​

介绍 ​

这是一个h-uni的内置插件，属于vue-cli本地插件，扩展了 uni-app 原生的 uni-build

插件已经扩展了在开发中常用的功能:

• openDevTools 项目编译后自动打开开发者工具
• setMode 可以以指定的模式启动，使用动态的 manifest.json pages.json env 环境变量
• beforeBuild&&afterBuild 用于自定义扩展的编译前和编译后的函数接口
• delOldFile 项目编译前先删掉上一次编译的旧文件内容

兼容性 ​

安装 ​

简单三步完成vue-cli-plugin-h-uni-build的安装

1.首先确保您已经成功安装了h-uni

在您的项目根目录运行以下命令：

yarn h-uni

yarn h-uni

npm run h-uni

npm run h-uni

如果您看到了 h-uni 的提示，证明 h-uni 已正确安装到您的项目中

如果没有，请移步至：h-uni 安装

2.内置的vue-cli-plugin-h-uni-build插件默认是没有启用的，我们需要手动启用

在您的项目根目录运行以下命令：

yarn h-uni initHUniBuild

yarn h-uni initHUniBuild

npm run h-uni initHUniBuild

npm run h-uni initHUniBuild

成功后您会看到成功提示

3.配置插件

配置项应该在项目根目录的vue.config.js文件中的pluginOptions中的h-uni-build中配置

// vue.config.js
module.exports = {
  pluginOptions: {
    "h-uni-build": {
      // options
    },
  },
};

// vue.config.js
module.exports = {
  pluginOptions: {
    "h-uni-build": {
      // options
    },
  },
};

const defineConfigHuniBuild = require('vue-cli-plugin-h-uni-build');
// vue.config.js
module.exports = {
  pluginOptions: {
    "h-uni-build": defineConfigHuniBuild({
      // options
    })
  },
};

const defineConfigHuniBuild = require('vue-cli-plugin-h-uni-build');
// vue.config.js
module.exports = {
  pluginOptions: {
    "h-uni-build": defineConfigHuniBuild({
      // options
    })
  },
};

openDevTools ​

• 类型: Object || false

项目编译后自动打开开发者工具，适用于使用 cli 搭建的 uniapp 项目

• 使用示例

正确配置后，在项目中运行你的启动命令，如：

yarn dev:mp-weixin

# 在uniapp打包编译`完成后`会自动打开对微信开发者工具

yarn dev:mp-weixin

# 在uniapp打包编译`完成后`会自动打开对微信开发者工具

• 启用或关闭此功能

把openDevTools配置成false,或者将此配置项置空,此功能即关闭

• 平台差异说明

由于各平台开发者工具支持功能参差不全以及不同平台开发的差异，因此会有很多的差异化内容

但openDevTools都保证了基本的打开开发者工具功能

openDevTools.paths ​

• 类型: Object

Object<key>:开发者工具标识

Object<value>:开发者工具的安装路径(绝对路径)

module.exports = {
  pluginOptions: {
    openDevTools: {
      paths: {
        "mp-weixin": "D:\\wechatDev\\微信web开发者工具",
        // ... 其他开发者工具目录
      },
    },
  },
};

module.exports = {
  pluginOptions: {
    openDevTools: {
      paths: {
        "mp-weixin": "D:\\wechatDev\\微信web开发者工具",
        // ... 其他开发者工具目录
      },
    },
  },
};

openDevTools.exitClose ​

• 类型: Boolean
• 默认: false

在命令行中使用ctrl+c退出进程时是否关闭开发者工具

openDevTools.projectDir ​

• 类型: String
• 默认: uniapp 默认编译输出文件夹

编译后项目的路径(绝对路径)

setMode ​

• 类型: Array<object> || false

项目编译前提示选择模式启动，模式中可配置该模式使用的 manifest.json 文件、pages.json 文件、env 环境变量，或者只更改部分选择

• 使用示例

配置了一个名称为：模式1 的启动方式

以该模式启动的环境变量APP_MODE为"模式1"

把./src/manifestMode1.json作为该模式的manifest.json

以该模式启动的navigationBarBackgroundColor为黑色(#000)

// vue.config.js
const path = require("path");

module.exports = {
  pluginOptions: {
    "h-uni-build": {
      setMode: [
        {
          name: "模式1",
          env: {
            APP_MODE: '"模式1"',
          },
          manifestJson: path.resolve(__dirname, "./src/manifestMode1.json"),
          pagesJson: {
            globalStyle: {
              navigationBarBackgroundColor: "#999",
            },
          },
        },
      ],
    },
  },
};

// vue.config.js
const path = require("path");

module.exports = {
  pluginOptions: {
    "h-uni-build": {
      setMode: [
        {
          name: "模式1",
          env: {
            APP_MODE: '"模式1"',
          },
          manifestJson: path.resolve(__dirname, "./src/manifestMode1.json"),
          pagesJson: {
            globalStyle: {
              navigationBarBackgroundColor: "#999",
            },
          },
        },
      ],
    },
  },
};

• 启用或关闭此功能

把setMode配置成false、空数组[],或者将此配置项置空,此功能即关闭

setModeItem.name ​

• 类型: String

模式的名称

setModeItem.env ​

• 类型: Object

为此模式设置的环境变量

Object<key> : String : 环境变量名称

Object<value> : String : 环境变量内容

// vue.config.js
module.exports = {
  pluginOptions: {
    "h-uni-build": {
      setMode: [
        {
          name: "模式1",
          env: {
            APP_MODE: '"模式1"',
          },
        },
      ],
    },
  },
};

// index.vue
console.log(process.env.APP_MODE === "模式1"); // true

// vue.config.js
module.exports = {
  pluginOptions: {
    "h-uni-build": {
      setMode: [
        {
          name: "模式1",
          env: {
            APP_MODE: '"模式1"',
          },
        },
      ],
    },
  },
};

// index.vue
console.log(process.env.APP_MODE === "模式1"); // true

setModeItem.manifestJson ​

• 类型: String || Object

该模式的manifest.json文件

String:指定一个manifest.json文件路径

Object:覆盖原有的manifest.json中的部分配置

setModeItem.pagesJson ​

• 类型: String || Object

该模式的pages.json文件

String:指定一个pages.json文件路径

Object:覆盖原有的pages.json中的部分配置

pagesDefault.json 和 manifestDefault.json ​

如果启用了setMode,每次运行时都会在项目根目录更新pagesDefault.json或manifestDefault.json

如果不存在pagesDefault.json或manifestDefault.json，则自动从manifest.json或pages.json中获取配置并生成文件

如果存在，则把pagesDefault.json或manifestDefault.json作为默认配置项

如果选项是Object类型，则把setModeItem.manifestJson或setModeItem.pagesJson中的配置项覆盖pagesDefault.json或manifestDefault.json并写入manifest.json或pages.json作为该模式的启动文件

beforeBuild 和 afterBuild ​

• 类型: function
• 参数: (api, options, args)

api:vue-cli/config

options:vue-cli/pluginoptions

args:运行命令参数

这是两个vue-cli-plugin-h-uni-build构建前、后的回调函数

可在此处处理异步任务，或者进行更灵活的扩展

构建前运行beforeBuild,比内置功能更早

构建后运行afterBuild,比内置功能更晚

delOldFile ​

• 类型: Boolean
• 默认 false

是否在编译前删掉上一次编译的旧文件

特殊处理：dev:h5 ​

dev:h5暂不支持afterbuild和openDevTools

openDevTools解决方案：

dev:h5一般情况下调试在浏览器中进行，可以直接使用vue-cli自带功能:devServer,即可实现自动打开浏览器功能：

// vue.config.js
module.exports = {
  devServer: {
    open: true,
  },
};

// vue.config.js
module.exports = {
  devServer: {
    open: true,
  },
};

afterbuild暂未解决