vue的index.html总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33276623/article/details/82968270

• 为啥要有index.html

对vue来说index.html是一个总的入口文件，vue是单页面应用，挂在id为app的div下然后动态渲染路由模板。

• 单页面应用

单页面应用是和多页面应用相对而言的。多页面应用是在每次页面跳转的时候，后台服务器都重新生成一张html页面，首屏时间快（只需要加载一次html），搜索引擎优化效果好（html内容都在），但是切换慢（每次页面切换都需要发出一次http请求）。单页面应用首次加载时会请求一次html，随后的页面渲染都依靠js动态的将当前页面的内容清除掉（原理：js可以感知url的变化），然后将下一个页面的内容挂载到当前页面上（前端实现，不是后端，无http发送时延），首屏慢，搜索引擎优化效果差，但是切换快。

• index.html实战代码汇总

手机端自适应使用（px*2/100=rem)

!function (e) {
      var t = e.document
        , n = t.documentElement
        , i = "orientationchange" in e ? "orientationchange" : "resize"
        , a = function e() {
          var t = n.getBoundingClientRect().width;
          return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 11.2), 8.55) + "px",
            e
        }();
      n.setAttribute("data-dpr", e.navigator.appVersion.match(/iphone/gi) ? e.devicePixelRatio : 1),
        /iP(hone|od|ad)/.test(e.navigator.userAgent) && (t.documentElement.classList.add("ios"),
          parseInt(e.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8 && t.documentElement.classList.add("hairline")),
        t.addEventListener && (e.addEventListener(i, a, !1),
          t.addEventListener("DOMContentLoaded", a, !1))
    }(window);

有新东西再写。。。。。。