h5

自定义模板

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

  • manifest.json->h5->template 节点中关联这个html文件的路径。
    1. <!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>
    template.h5.html文件，即是此用途。 关于SEO的补充说明 H5平台是SPA单页应用，普通的SEO信息即加meta字段只能在，自定义的模板html里配置首页。 但SEO的时代在变，现在更有效的方式，是用uni-app同时发布一版百度小程序，这个搜索权重更高。DCloud的ask社区的H5版也是uni-app做的，同时发布了百度小程序，权重更高，每天来自百度的搜索量非常多。是一个可现身说法的好案例。

    router

    注意：history 模式发行需要后台配置支持，详见：history 模式的后端配置

    async

    devServer

    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 中的结果：
    1. <script src=/h5/static/js/chunk-vendors.803ce52d.js></script><script src=/h5/static/js/index.34e8497d.js>
    ``（无效地址仅用作示例） 后，发布时 index.html 中的结果：
    1. <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>
    注意
  • https://juejin.im/post/5af003286fb9a07aac24611b

    sdkconfig

    示例
    1. "h5": {    "sdkConfigs": {        "maps": {            "qqmap": {                //腾讯地图秘钥（key）                "key": "XVXBZ-NDMC4-JOGUS-XGIEE-QVHDZ-AMFV2"            }        }    }}

    optimization

    treeShaking

    示例：
    1. "h5": {    "optimization": {        "treeShaking": {            "enable": true        }    }}