uniapp怎么打包-猿码集

uniapp是什么？

uniapp是一款由DCloud出品的跨平台应用开发框架，可以将一份代码同时运行在多个平台，包括iOS、Android、H5、小程序等。如果你熟悉Vue.js，那么学习uniapp将会非常容易，因为它底层使用的就是Vue.js。在uniapp中，我们可以使用Vue.js的语法来开发跨平台应用，同时也可以直接使用原生的API来完成一些更为复杂的操作。

uniapp的打包方式

当我们完成一个uniapp项目后，就需要对它进行打包。uniapp提供了多种打包方式，我们可以选择最适合我们项目的方式进行打包。

1. HBuilderX打包

HBuilderX是一款由DCloud推出的基于VS Code的集成开发环境，它自带了uniapp的打包工具。使用HBuilderX进行打包非常简单，我们只需要在项目根目录下创建一个manifest文件，然后选择HBuilderX中的一键打包按钮即可。同时，HBuilderX还提供了多种打包模式，可以根据我们的需求来选择不同的打包方式。


    manifest.json
    
    {
      "name": "uniapp_demo",
      "app": {
        "id": "com.xxx.xxx",
        "versionName": "1.0.0",
        "versionCode": "1",
        "description": "uniapp_demo"
      },
      "modules": {
        "uni-app": {
          "version": "1.0.0"
        }
      },
      "condition": [
        [
          {
            "platform": [
              "android",
              "ios",
              "h5",
              "mp-weixin"
            ]
          }
        ]
      ]
    }

2. cli命令行打包

通过cli命令行进行打包需要我们先安装uni-app的命令行工具，命令如下：

npm install -g uni-app-cli

安装完成后，我们在项目根目录下执行以下命令即可进行打包：

uni-app build

cli命令行打包的优点是可以自由定制打包流程，比如可以在打包前自动执行一些脚本来完成一些额外的操作，比如压缩代码、自动上传等。

3. 安装包（APK/IPA）打包

通过HBuilderX进行打包时，我们可以选择将项目打包成APK或IPA安装包，这种方式适用于我们需要将应用上传到应用商店进行发布的情况。打包成安装包的过程比较简单，我们只需要在HBuilderX中选择对应的打包模式，然后按照提示进行操作即可。打包完成后，我们会得到一个可以直接安装到手机上的安装包。

4. 小程序打包

uniapp可以将项目打包成小程序，包括微信小程序、百度小程序等。和其它打包方式一样，我们只需要在HBuilderX中选择对应的打包模式即可。

需要注意的是，小程序的打包需要我们先进行注册、审核等一系列操作，才能将应用发布到对应的小程序商店中。

5. H5打包

在uniapp中，我们也可以将项目打包成H5应用，这样我们就可以在浏览器中访问我们的应用。H5的打包方式非常简单，在HBuilderX中选择H5打包模式即可。接着，我们将打包后的文件放在Web服务器上，用户可以通过浏览器访问我们的应用。

uniapp打包优化

当我们对uniapp项目进行打包时，需要注意一些优化问题，以提高应用的性能。

1. 启用压缩

我们可以在HBuilderX中的manifest.json中启用压缩，来减小我们的应用体积。启用压缩后，可以在一定程度上减少应用的大小，提高应用的加载速度。


    {
      "app-plus": {
        "ceshi": {
          "compress": true
        }
      }
    }

2. 启用懒加载

我们可以在vue.config.js中启用webpack的懒加载功能，将应用中的组件进行拆分，分别打包为不同的文件。这样可以减小我们的应用包大小，提高应用的加载速度。


    module.exports = {
      chainWebpack: config => {
        config.plugins.delete('prefetch')
      }
    }

3. 启用Tree Shaking

在vue.config.js中，我们可以启用webpack的Tree Shaking功能，这样可以剔除应用中未使用的代码，减小应用包的大小。


    module.exports = {
      configureWebpack: config => {
        config.optimization = {
          usedExports: true,
          sideEffects: false,
          splitChunks: {
            chunks: 'async',
            minSize: 250000,
            maxSize: 0
          }
        }
      }
    }

总结

通过本文，我们了解了uniapp提供的多种打包方式，并且掌握了如何对uniapp进行打包优化。当我们完成一个uniapp项目后，根据项目需求选择最适合的打包方式，进行打包优化后，可以提高我们应用的性能，为用户提供更加良好的体验。

uniapp怎么打包