uniapp是什么
uniapp是一种基于Vue.js构建的跨平台应用开发框架，它可以一次编写代码，在多个平台上运行。目前，uniapp可以方便地打包出App、小程序和H5三种格式的应用程序。本文主要介绍如何打包uniapp应用为H5。
前置条件
安装uni-app-cli
首先，您需要安装uni-app-cli。如果您已经安装好了npm，可以在终端中输入以下命令安装：
npm install -g @vue/cli @vue/cli-service-global
npm install -g @dcloudio/uni-cli
如果您已经安装好了Vue CLI，uni-app-cli也可以通过Vue CLI安装：
vue create -p dcloudio/uni-preset-vue my-project
这样就可以创建一个uni-app的项目了。
编写uni-app应用
接下来，您需要编写一个uni-app应用程序。这里不再赘述具体内容，只需要说明一下uni-app的文件结构。uni-app的文件组织结构和常规Vue.js项目非常相似。下面是uni-app的目录结构：
App.vue：根组件
main.js：入口文件
manifest.json：uni-app的配置信息
pages/：页面文件夹
static/：静态文件
unpackage/：打包后的文件
package.json：项目配置文件
打包uni-app为H5
完成uni-app应用程序的编写之后，就可以打包为H5应用了。以下是详细的打包步骤。
配置manifest.json
在打包之前，需要配置一些参数。打开manifest.json文件，可以看到一些配置项，如下：
{
"name": "my-app",
"description": "My App",
"screens": {
"web": {
"h5": {
"titleNView": false,
"loading": false
}
}
},
"custom": {}
}
其中，name和description分别表示应用程序的名称和描述。screens定义了应用程序在不同平台上的样式。这里只需要关注web部分，因为我们要打包为H5应用。h5中，可以设置titleNView和loading，分别表示是否显示默认的标题栏和加载动画。
打包为H5应用
配置完成后，就可以将应用程序打包为H5格式了。在终端中进入项目根目录，执行以下命令：
uni-app build --mode h5
这个命令会在unpackage/dist/build/h5文件夹中生成H5应用。在浏览器中打开index.html文件即可看到应用程序的效果。
自定义uni-app的H5样式
如果您需要自定义uni-app的H5样式，可以在项目根目录中创建一个vue.config.js文件，并加上以下配置：
module.exports = {
css: {
loaderOptions: {
css: {
// 这里写入自定义的CSS代码
}
}
}
}
在css属性中填写自定义CSS代码即可。
总结
本文介绍了如何将uni-app应用程序打包为H5应用，并且简单介绍了uni-app的文件结构和样式配置。希望本文对您有所帮助。