uniapp怎么用命令打包H5

uniapp怎么用命令打包H5

uniapp简介

uniapp是一款基于Vue.js构建的跨平台开发框架，通过使用uniapp，可以快速地构建出同时支持多个平台（如H5、微信小程序、App等）的应用程序。uniapp既增加了应用程序的开发效率，又方便了应用程序的推广。

命令行打包H5

在uniapp中，我们可以使用命令行工具来打包H5应用程序，这里介绍使用命令行打包H5的步骤：

步骤一：安装cli

cli是uniapp的命令行工具，我们需要先安装cli。

npm install -g @vue/cli

这里我们使用npm来安装系列，如果你的电脑上没有安装npm，可以先安装一下。

注意：如果你已经安装过cli，请检查cli版本是否低于3.x，如果是，请升级cli。

步骤二：创建uniapp项目

在安装好cli之后，我们可以创建一个uniapp项目了。

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

命令中的my-project可以改成你自己的项目名称。

步骤三：在manifest.json中配置H5

H5需要在manifest.json中配置，在manifest.json文件中，需要添加"h5" : {}

{

  "name": "myApp",
  "manifest_version": "2.0",
  "version": "1.0.0",
  "description": "myApp",
  "h5": {}
}

步骤四：在命令行中打包H5

在项目目录下打开命令行，输入以下命令：

npm run dev:%YOUR_GOTO_APP%//将%YOUR_GOTO_APP%换成你想打包的端的名称

这里以打包H5为例，所以将%YOUR_GOTO_APP%替换为h5，即：

npm run dev:h5

打包成功

当命令行中的打包过程执行完毕并没有报错，那么我们就可以在项目中dist/build/h5/中找到我们打出来的H5应用程序了。

总结

通过命令行打包H5，可以在不使用开发工具的情况下，快速地构建出跨平台的应用程序。这对于一些没有开发工具的场景，如CICD环境下进行打包、持续集成以及一些小众平台的适配等等都非常方便。