官网入口文件 index.html / index.ejs

小草莓蹦蹦跳

已于 2023-06-05 15:01:48 修改

阅读量273

点赞数

分类专栏： Vue1.x和Vue2.x JavaScript 移动端开发常见问题文章标签：前端 vue.js

于 2019-07-12 14:59:15 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/95619667

版权

JavaScript 同时被 3 个专栏收录

150 篇文章 2 订阅

订阅专栏

Vue1.x和Vue2.x

81 篇文章 6 订阅

订阅专栏

移动端开发常见问题

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="keywords"
      content="xxx"
    />
    <meta
      name="description"
      content="xxxxxxxxxx"
    />
    <!-- 页面按原比例显示 -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 设置苹果工具栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <meta name="format-detection" content="telphone=no, email=no" />
    <!-- 用来防止别人在框架里调用你的页面 -->
    <meta http-equiv="Window-target" content="_top" />
    <!-- 解决部分兼容性问题，如果安装了GCF，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进行渲染。 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit" />
    <!-- seo -->
    <link rel="canonical" href="移动端官网地址" />
    <!-- pc站 -->
    <meta name="applicable-device" content="pc" />
    <meta
      name="mobile-agent"
      content="format=html5; url=移动端官网地址"
    />
    <!-- 避免转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <title>xxxxxxxxxxxxxxxxxxxxxxx</title>
    <style>
      /* loading */
      #loading,
      .loading {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-color: #fff;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
      }
      .load-img {
        width: 110px;
        height: 110px;
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }

      .loader,
      .loader:before,
      .loader:after {
        border-radius: 50%;
      }
      .load-container {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .loader {
        color: #008c96;
        font-size: 12px;
        text-indent: -99999em;
        margin: 55px auto;
        position: relative;
        width: 10em;
        height: 10em;
        box-shadow: inset 0 0 0 .35em;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
      }
      .loader:before,
      .loader:after {
        position: absolute;
        content: '';
      }
      .loader:before {
        width: 5.2em;
        height: 10.2em;
        background: #fff;
        border-radius: 10.2em 0 0 10.2em;
        top: -0.1em;
        left: -0.1em;
        -webkit-transform-origin: 5.2em 5.1em;
        transform-origin: 5.2em 5.1em;
        -webkit-animation: load2 1.5s infinite ease 1s;
        animation: load2 1.5s infinite ease 1s;
      }
      .loader:after {
        width: 5.2em;
        height: 10.2em;
        background: #fff;
        border-radius: 0 10.2em 10.2em 0;
        top: -0.1em;
        left: 5.1em;
        -webkit-transform-origin: 0px 5.1em;
        transform-origin: 0px 5.1em;
        -webkit-animation: load2 1.5s infinite ease;
        animation: load2 1.5s infinite ease;
      }
      @-webkit-keyframes load2 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load2 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="loading" id="loading">
      <div class="load-container load2">
        <div class="loader">Loading...</div>
      </div>
      <img
        src="http://xcximg.luzhuoquan.com/official/loading.png"
        alt="加载中…"
        class="load-img"
      />
    </div>

    <div id="app"></div>

    <%if (htmlWebpackPlugin.options.environment == '"production"') {%>
    <script src="https://cdn.staticfile.org/vue/2.5.20/vue.min.js"></script>
    <script>
      if (!window.Vue) {
        var ele = document.createElement('script')
        ele.src =
          '<%= htmlWebpackPlugin.options.assetsPublicPath %>/static/cdn/vue.min.js'
        document.body.appendChild(ele)
      }
    </script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script>
      if (!window.VueRouter) {
        var ele = document.createElement('script')
        ele.src =
          '<%= htmlWebpackPlugin.options.assetsPublicPath %>/static/cdn/vue-router.min.js'
        document.body.appendChild(ele)
      }
    </script>
    <% } %>

    <!-- built files will be auto injected -->

    <!-- 百度统计 /s -->
    <script>
      var _hmt = _hmt || []
      ;(function() {
        var hm = document.createElement('script')
        hm.src = 'https://hm.baidu.com/hm.js?10720a8ad3bfa154b9601908024b7bf7'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(hm, s)
      })()
    </script>
    <!-- 百度统计 /e -->
  </body>
</html>