h5
属性 | 类型 | 说明 |
---|---|---|
title | String | 页面标题,默认使用 manifest.json 的 name |
template | String | index.html模板路径,相对于应用根目录,可定制生成的 html 代码。参考:自定义模板 |
router | Object | 参考:router |
async | Object | 参考:async |
devServer | Object | 开发环境 server 配置,参考:devServer |
publicPath | String | 引用资源的地址前缀,仅发布时生效。参考:publicPath |
sdkConfigs | String | SDK配置,例如地图… 参考:sdkConfigs |
optimization | Object | 打包优化配置(HBuilderX 2.1.5 以上支持),参考optimization |
自定义模板
需要使用自定义模板的场景,通常有以下几种情况:
- 调整页面 head 中的 meta 配置
- 补充 SEO 相关的一些配置(仅首页)
- 加入百度统计等三方js使用自定义模板时,1. 工程根目录下新建一个html文件;2. 复制下面的基本模板内容,到这个html文件,在此基础上修改meta和引入js;3. 在
manifest.json->h5->template
节点中关联这个html文件的路径。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
在hello uni-app示例中有一个template.h5.html
文件,即是此用途。
关于SEO的补充说明
H5平台是SPA单页应用,普通的SEO信息即加meta字段只能在,自定义的模板html里配置首页。
但SEO的时代在变,现在更有效的方式,是用uni-app同时发布一版百度小程序,这个搜索权重更高。DCloud的ask社区的H5版也是uni-app做的,同时发布了百度小程序,权重更高,每天来自百度的搜索量非常多。是一个可现身说法的好案例。
router
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
mode | String | hash | 路由跳转模式,支持 hash、history |
base | String | / | 应用基础路径,例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/" |
注意:history
模式发行需要后台配置支持,详见:history 模式的后端配置
async
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
loading | String | AsyncLoading | 页面 js 加载时使用的组件(需注册为全局组件) |
error | String | AsyncError | 页面 js 加载失败时使用的组件(需注册为全局组件) |
delay | Number | 200 | 展示 loading 加载组件的延时时间(页面 js 若在 delay 时间内加载完成,则不会显示 loading 组件) |
timeout | Number | 3000 | 页面 js 加载超时时间(超时后展示 error 对应的组件) |
devServer
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
https | Boolean | false | 启用 https 协议 |
disableHostCheck | Boolean | false | 禁用 Host 检查 |
Tips:uni-app
中 manifest.json->h5->devServer
实际上对应 webpack
的 devServer,鉴于 manifest 为 json 文件,故 webpack.config.js->devServer
配置项下的简单类型属性均可在manifest.json->h5->devServer
节点下配置,funciton 等复杂类型暂不支持。
publicPath
配置 publicPath 为 cdn 资源地址前缀,这样编译出来的 html 文件,引用的 js,css 路径会自动变成 cdn 上的地址。
示例
以 hello-uniapp 发布 H5 时为例
未配置 publicPath 时,发布时 index.html 中的结果:
<script src=/h5/static/js/chunk-vendors.803ce52d.js></script>
<script src=/h5/static/js/index.34e8497d.js>
配置 publicPath 为 https://www.cdn.com/h5/
(无效地址仅用作示例) 后,发布时 index.html 中的结果:
<script src=https://www.cdn.com/h5/static/js/chunk-vendors.803ce52d.js></script>
<script src=https://www.cdn.com/h5/static/js/index.34e8497d.js>
注意
- 打包部署后,在服务器上开启 gzip 可以进一步压缩文件。具体的配置,可以参考网上的分享:https://juejin.im/post/5af003286fb9a07aac24611b
sdkconfig
示例
"h5": {
"sdkConfigs": {
"maps": {
"qqmap": {
//腾讯地图秘钥(key)
"key": "XVXBZ-NDMC4-JOGUS-XGIEE-QVHDZ-AMFV2"
}
}
}
}
optimization
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
prefetch | Boolean | false | 资源预取 |
preload | Boolean | false | 资源预加载 |
treeShaking | Object | 摇树优化,根据项目需求,动态打包框架所需的组件及API,保持框架代码最精简化,参考treeShaking |
treeShaking
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
enable | Boolean | false | 是否启用摇树优化 |
示例:
"h5": {
"optimization": {
"treeShaking": {
"enable": true
}
}
}