manifest.json 应用配置

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

配置项列表

属性	类型	默认值	描述
name	String		应用名称
description	String		应用描述
networkTimeout	Object		网络超时时间，详见
debug	Boolean	false	是否开启 debug 模式，开启后调试信息以 `info` 的形式给出，其信息有页面的注册，页面路由，数据更新，事件触发等
h5	Object		H5 特有配置
wx	Object		微信小程序特有配置
tt	Object		抖音小程序特有配置
xhs	Object		小红书小程序特有配置
ks	Object		快手小程序特有配置

networkTimeout

各类网络请求的超时时间，单位均为毫秒。

属性	类型	必填	默认值	说明
request	Number	否	60000	qin.request 的超时时间，单位毫秒。
connectSocket	Number	否	60000	qin.connectSocket 的超时时间，单位毫秒。
uploadFile	Number	否	60000	qin.uploadFile 的超时时间，单位毫秒。
downloadFile	Number	否	60000	qin.downloadFile 的超时时间，单位毫秒。

Tips

微信小程序的 appid 等信息，需要配置在 wx 节点下。不要配置在 h5 下。 sdkConfigs 下出现的 wx 节点，配置的是 App 的第三方 SDK 信息。

optimization

可以减轻启动时加载的js数量，提升启动速度。

在 manifest 中启动分包后，需要在 pages.json 中配置具体的分包规则，与小程序的配置相同，详见

也就是一旦在 pages.json 里配置分包，小程序一定生效。

h5

属性	类型	说明
title	String	页面标题，默认使用 manifest.json 的 name
template	String	index.html模板路径，相对于应用根目录，可定制生成的 html 代码。参考：自定义模板
router	Object	参考：router
async	Object	参考：async
devServer	Object	开发环境 server 配置，参考：devServer
sdkConfigs	String	SDK配置，例如地图... 参考：sdkConfigs
optimization	Object	打包优化配置，参考optimization

自定义模板

需要使用自定义模板的场景，通常有以下几种情况：

调整页面 head 中的 meta 配置
补充 SEO 相关的一些配置（仅首页）
加入百度统计等三方 js

使用自定义模板时，1. 工程根目录下新建一个 html 文件；2. 复制下面的基本模板内容，到这个 html 文件，在此基础上修改 meta 和引入 js ；3. 在 manifest.json->h5->template 节点中关联这个 html 文件的路径。

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
      <%= htmlWebpackPlugin.options.title %>
    </title>
    <!-- Open Graph data -->
    <!-- <meta property="og:title" content="Title Here" /> -->
    <!-- <meta property="og:url" content="http://www.example.com/" /> -->
    <!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
    <!-- <meta property="og:description" content="Description Here" /> -->
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
      document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
  </head>
  <body>
    <noscript>
      <strong>Please enable JavaScript to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
      <%= htmlWebpackPlugin.options.title %>
    </title>
    <!-- Open Graph data -->
    <!-- <meta property="og:title" content="Title Here" /> -->
    <!-- <meta property="og:url" content="http://www.example.com/" /> -->
    <!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
    <!-- <meta property="og:description" content="Description Here" /> -->
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
      document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.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里配置首页。

router@h5-router

属性	类型	默认值	说明
mode	String	hash	路由跳转模式，支持 hash、history
base	String	/	应用基础路径，例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"，支持设置为相对路径 "./"

注意：

history 模式部分浏览器器不支持，iOS微信内置浏览器无法观测到URL变动，默认分享（不使用微信JSSDK的情况下）的链接为入口页链接。
history 模式发行需要后台配置支持，详见：history 模式的后端配置

async@h5-async

属性	类型	默认值	说明
loading	String	AsyncLoading	页面 js 加载时使用的组件（需注册为全局组件）
error	String	AsyncError	页面 js 加载失败时使用的组件（需注册为全局组件）
delay	Number	200	展示 loading 加载组件的延时时间（页面 js 若在 delay 时间内加载完成，则不会显示 loading 组件）
timeout	Number	60000	页面 js 加载超时时间（超时后展示 error 对应的组件）

devServer

属性	类型	默认值	说明
https	Boolean	false	启用 https 协议
port	Number	Vue2 8080；Vue3 3000	前端开发服务端口
disableHostCheck	Boolean	false	禁用 Host 检查

Tips：qinjs 中 manifest.json->h5->devServer，vue3 实际上对应 vite 的 server，鉴于 manifest 为 json 文件，故 webpack.config.js->devServer 及 vite.config.js->server 配置项下的简单类型属性均可在manifest.json->h5->devServer节点下配置，funciton 等复杂类型暂不支持。

publicPath

配置 publicPath 为 cdn 资源地址前缀，这样编译出来的 html 文件，引用的 js，css 路径会自动变成 cdn 上的地址。

注意：如果想对图片生效，image组件的图片地址需要使用相对路径

示例

以 hello-uniapp 发布 H5 时为例

未配置 publicPath 时，发布时 index.html 中的结果：

html

<script src=/h5/static/js/chunk-vendors.803ce52d.js></script>
<script src=/h5/static/js/index.34e8497d.js>

<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 中的结果：

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>

<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

三方SDK配置。三方SDK的使用需要向这些SDK提供商申请，并配置参数到此处。

属性	类型	描述
maps	Object	地图或位置相关SDK

maps

地图服务商 SDK 配置，使用地图以及位置（IP 定位及坐标转换）需要配置此项。

示例

json

"h5": {
  "sdkConfigs": {
    // 使用地图或位置相关功能必须填写其一
    "maps": {
      "qqmap": {
        // 腾讯地图秘钥 https://lbs.qq.com/dev/console/key/manage
        "key": ""
      },
      "google": {
        // 谷歌地图秘钥 https://developers.google.com/maps/documentation/javascript/get-api-key
        "key": ""
      },
      "amap": {
        // 高德地图秘钥 https://console.amap.com/dev/key/app
        "key": "",
        // 高德地图安全密钥 https://console.amap.com/dev/key/app
        "securityJsCode": "",
        // 高德地图安全密钥代理服务器地址 https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare
        "serviceHost": "",
      }
    }
  }
}

"h5": {
  "sdkConfigs": {
    // 使用地图或位置相关功能必须填写其一
    "maps": {
      "qqmap": {
        // 腾讯地图秘钥 https://lbs.qq.com/dev/console/key/manage
        "key": ""
      },
      "google": {
        // 谷歌地图秘钥 https://developers.google.com/maps/documentation/javascript/get-api-key
        "key": ""
      },
      "amap": {
        // 高德地图秘钥 https://console.amap.com/dev/key/app
        "key": "",
        // 高德地图安全密钥 https://console.amap.com/dev/key/app
        "securityJsCode": "",
        // 高德地图安全密钥代理服务器地址 https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare
        "serviceHost": "",
      }
    }
  }
}

optimization

属性	类型	默认值	说明
prefetch	Boolean	false	资源预取
preload	Boolean	false	资源预加载
treeShaking	Object		摇树优化，根据项目需求，动态打包框架所需的组件及 API ，保持框架代码最精简化，参考treeShaking

treeShaking

属性	类型	默认值	说明
enable	Boolean	false	是否启用摇树优化

示例：

json

"h5": {
  "optimization": {
    "treeShaking": {
      "enable": true
    }
  }
}

"h5": {
  "optimization": {
    "treeShaking": {
      "enable": true
    }
  }
}

Tips：关于摇树优化（treeShaking）原理及优化结果，参考

wx

属性	类型	说明
appid	String	微信小程序的 AppID ，申请
setting	Object	微信小程序项目设置，参考 setting
functionalPages	Boolean	微信小程序是否启用插件功能页，默认关闭
requiredBackgroundModes	Array	微信小程序需要在后台使用的能力,详见
plugins	Object	使用到的插件，详见
resizable	Boolean	在iPad上小程序是否支持屏幕旋转，默认关闭
navigateToMiniProgramAppIdList	Array	需要跳转的小程序列表，详见
permission	Object	微信小程序接口权限相关设置，比如申请位置权限必须填此处详见
workers	String	Worker 代码放置的目录。详见
optimization	Object	对微信小程序的优化配置
mergeVirtualHostAttributes	Boolean	合并组件虚拟节点外层属性（目前仅支持 style、class 属性）
embeddedAppIdList	Array	要半屏跳转的小程序appid。详见
requiredPrivateInfos	Array	地理位置相关接口。详见
lazyCodeLoading	String	目前仅支持值 requiredComponents，代表开启小程序按需注入特性，详见

setting

编译到微信小程序平台下的项目设置。

属性	类型	说明
urlCheck	Boolean	是否检查安全域名和 TLS 版本
es6	Boolean	ES6 转 ES5
postcss	Boolean	上传代码时样式是否自动补全
minified	Boolean	上传代码时是否自动压缩
bigPackageSizeSupport	Boolean	预览及真机调试时包体积上限是否调整为4M，默认为 true 。

注意: 使用微信小程序手势组件会强制开启 ES6 转 ES5

optimization

对微信小程序的优化配置

属性	类型	说明
subPackages	Boolean	是否开启分包优化

tt

属性	类型	说明
appid	String	抖音小程序的 AppID ，申请
setting	Object	抖音小程序项目设置，参考抖音小程序项目设置
navigateToMiniProgramAppIdList	Array	需要跳转的小程序列表，详见
scopedSlotsCompiler	String	可选：legacy 、 auto 、 augmented ，默认： auto
slotMultipleInstance	Boolean	默认支持

抖音小程序项目设置@tt-setting

属性	类型	说明
urlCheck	Boolean	是否检查安全域名和 TLS 版本
es6	Boolean	ES6 转 ES5
postcss	Boolean	上传代码时样式是否自动补全
minified	Boolean	上传代码时是否自动压缩

ks

属性	类型	说明
appid	String	快手小程序的 AppID，申请
optimization	Object	对快手小程序的优化配置
scopedSlotsCompiler	String	可选：legacy 、 auto 、 augmented ，默认： augmented
slotMultipleInstance	Boolean	模拟单个作用域插槽渲染为多个实例，此配置 Vue3 环境已默认支持

optimization

对快手小程序的优化配置

属性	类型	说明
subPackages	Boolean	是否开启分包优化

xhs

属性	类型	说明
appid	String	小红书小程序的 AppID，申请
optimization	Object	对小红书小程序的优化配置
scopedSlotsCompiler	String	可选：legacy 、 auto 、 augmented ，默认： augmented
slotMultipleInstance	Boolean	模拟单个作用域插槽渲染为多个实例，此配置 Vue3 环境已默认支持

optimization

对小红书小程序的优化配置

属性	类型	说明
subPackages	Boolean	是否开启分包优化

关于分包优化的说明

在对应平台的配置下添加 "optimization":{"subPackages":true} 开启分包优化
目前只支持 wx 、 tt 、 ks 的分包优化
分包优化具体逻辑：
- 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用
- js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
- 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息

分包内静态文件示例

json

"subPackages": [
  {
    "root": "pages/sub",
    "pages": [{
      "path": "index/index"
    }
  ]
}]

"subPackages": [
  {
    "root": "pages/sub",
    "pages": [{
      "path": "index/index"
    }
  ]
}]

以上面的分包为例，放在每个分包 root 对应目录下的静态文件会被打包到此分包内。

manifest.json 应用配置 ​

配置项列表 ​

networkTimeout ​

optimization ​

h5 ​

自定义模板 ​

router@h5-router ​

async@h5-async ​

devServer ​

publicPath ​

sdkconfig ​

maps ​

optimization ​

treeShaking ​

wx ​

setting ​

optimization ​

tt ​

抖音小程序项目设置@tt-setting ​

ks ​

optimization ​

xhs ​

optimization ​

关于分包优化的说明 ​

manifest.json 应用配置

配置项列表

networkTimeout

optimization

h5

自定义模板

router@h5-router

async@h5-async

devServer

publicPath

sdkconfig

maps

optimization

treeShaking

wx

setting

optimization

tt

抖音小程序项目设置@tt-setting

ks

optimization

xhs

optimization

关于分包优化的说明