uniapp如何打包成h5

1. uniapp简介

uniapp是一个基于Vue.js开发的跨平台应用解决方案，可以将单一代码编译成多个平台应用，如H5、微信小程序、支付宝小程序、App和快应用等。uniapp具有速度快、开发成本低和跨平台性强的特点，可以帮助开发者快速搭建跨平台应用。

2. 准备工作

2.1 安装uni-app

前提条件是已安装node.js，打开终端执行以下命令安装全局的uni-app命令行工具：

npm install -g @vue/cli @vue/cli-service-global
npm install -g @dcloudio/vue-cli-plugin-uni

2.2 创建uni-app项目

执行以下命令创建uni-app项目：

vue create -p dcloudio/uni-preset-vue my-project

创建完成后，进入项目目录执行以下命令启动开发服务：

npm run dev:%PLATFORM%

这里可以用%PLATFORM%替代平台名称，如要开发H5，则执行以下命令：

npm run dev:h5

3. 打包成H5

uni-app支持将同一份代码打包成多种平台的应用，这里着重介绍如何将代码打包成H5应用。

3.1 配置H5打包

打开项目根目录下的vue.config.js文件，增加以下配置项：

module.exports = {
  // H5打包配置
  configureWebpack: {
    // 关闭webpack性能提示
    performance: {
      hints: false
    }
  },
  // H5应用发布路径，默认为/=根路径，空字符串代表相对路径，可以为网络绝对路径
  publicPath: '',
  // H5应用输出目录，默认为dist
  outputDir: 'dist/h5',
  // H5应用静态资源目录，默认为static
  assetsDir: 'static/h5',
  // H5启动页配置
  pluginOptions: {
    'uni-app-plus': {
      // H5启动页背景颜色
      splashscreenBackgroundColor: '#ffffff',
      // H5启动页配置
      splashscreen: {
        'iphone|ipad': '/static/h5/splashscreens/ios_default.png',
        'android': '/static/h5/splashscreens/android_default.png',
        'psd': '/static/h5/splashscreens/source.psd'
      }
    }
  }
}

3.2 打包H5应用

执行以下命令打包H5应用：

npm run build:h5

打包完成后，在dist/h5目录下可以看到生成的H5应用文件。

4. 总结

uniapp是一个快速开发跨平台应用的解决方案，可以方便地将同一份代码编译成多种平台的应用。通过配置webpack和执行打包命令，开发者可以将uniapp项目打包成H5应用并发布到网络上。