首页 > 其他分享 >index.html在webpack打包时动态生成index模板

index.html在webpack打包时动态生成index模板

时间:2023-09-11 15:26:06浏览次数:50  
标签:index sessionStorage window SITE webpack html key CONFIG event

通过<%= BASE_URL %>包裹环境变量

通过<% if (process.env.NODE_ENV === 'production' ) { %> <% } %>包裹条件判断

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
  <link href="<%= BASE_URL %>favicon.ico" rel="icon"/>
  <title><%= VUE_APP_TITLE %></title>
  <!--  用于动态控制打印方向-->
  <style id="printStyle">
    @media print {
      @page {
        size: portrait//portrait 纵向 landscape 横向
      }
    }
  </style>
  <% if (process.env.NODE_ENV === 'production' ) { %>
  <script src="config.js" type="text/javascript"></script>
  <script>
    document.title = window.SITE_CONFIG.appTitle
  </script>
  <script>
    // 生产环境下引入百度统计
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?f3469347be30afe72d0f0c0169c6ddb6&quot"
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
  <% } %>
  <!--    其他环境读取环境变量-->
  <% if (process.env.NODE_ENV !== 'production' ) { %>
  <script>
    window.SITE_CONFIG = {};
    window.SITE_CONFIG['appTitle'] = '<%= process.env.VUE_APP_TITLE %>';
    window.SITE_CONFIG['version'] = '<%= process.env.VUE_APP_VERSION %>';
    window.SITE_CONFIG['apiURL'] = '<%= process.env.VUE_APP_API %>';
    window.SITE_CONFIG['websocketURL'] = '<%= process.env.VUE_APP_API_WEBSOCKET %>'
    window.SITE_CONFIG['VUE_APP_API_REPORT'] = '<%= process.env.VUE_APP_API_REPORT %>'
  </script>
  <% } %>
</head>
<body>
<script>
  // session实现多标签页共享
  ;(function () {
    // 判断当前sessionStorage中是否存在数据
    if (!sessionStorage.length) {
      // 随便存储一个数据触发storage监听
      localStorage.setItem('getSessionStorageData', Date.now())
    }
    window.addEventListener('storage', function (event) {
      if (event.key === 'getSessionStorageData') {
        // 通过localStorage暂时共享数据
        localStorage.setItem('sessionStorageData', JSON.stringify(window.sessionStorage))
        localStorage.removeItem('sessionStorageData')
      }
      if (event.key === 'sessionStorageData' && !sessionStorage.length) {
        const data = JSON.parse(event.newValue)
        for (key in data) {
          window.sessionStorage.setItem(key, data[key])
        }
      }
      if (event.key === 'clearSessionStorageData') {
        sessionStorage.clear()
        location.reload()
      }
      if (event.key === 'loginSessionStorageData') {
        const data = JSON.parse(event.newValue)
        for (key in data) {
          window.sessionStorage.setItem(key, data[key])
        }
        location.reload()
      }
    })
  })()
  // 浏览器url不包含hash值 基于hash模式的vueRouter在hash值改变后不会影响url,页面不会进行刷新
  // 监听hash值改变后重新刷新浏览器
  window.onhashchange = function () {
    if (window.location.hash.includes('guidePage')) {
      window.location.reload()
    }
  }
</script>
<noscript>
  <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

标签:index,sessionStorage,window,SITE,webpack,html,key,CONFIG,event
From: https://www.cnblogs.com/whh666/p/17693614.html

相关文章

  • 不再担心正向还是逆向查询,Vlookup函数的救星Index+Match组合!
    1职场实例我们在日常使用Excel时,遇到最多的场景便是“查找”问题,一提到“查找”,我们脑海里首先想到的肯定就是“Vlookup函数”了,但是“Vlookup函数”也有其自身的小短板,比如说遇到逆向查找的时候,使用Vlookup函数的基本语法公式时便会立马失效。那么有没有一种方法,不管正向还是逆向......
  • 直播软件开发,JavaScript HTML5 dom,图片拖拽上传功能
    直播软件开发,JavaScriptHTML5dom,图片拖拽上传功能 <!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">.box{display:flex;width:100%;justify-content:center;margin-top:......
  • 【Kafka】ZooKeeper启动失败报错java.net.BindException_ Address already in use_ bi
    问题描述Kafka2.8.1ZooKeeper启动失败。zookeeper-server-start.bat../../config/zookeeper.properties[2023-09-0418:21:49,497]INFObindingtoport0.0.0.0/0.0.0.0:2181(org.apache.zookeeper.server.NIOServerCnxnFactory)[2023-09-0418:21:49,498]ERRORUnexpected......
  • DOMPurify 使用方法,如何安全地操作DOM |.sanitize()|.innerHTML|TypeScript TS
    DOMPurify是一个仅限DOM的,超快速的,超级宽容的XSS清理器,用于HTML,MathML和SVG。它也非常简单易用和入门。DOMPurify于2014年2月启动,同时已达到v3.0.5版本。DOMPurify是用JavaScript编写的,适用于所有现代浏览器(Safari(10+),Opera(15+),Edge,Firefox和Chrome-以及几乎所有使用Blink,Gecko......
  • HTML5(H5)新特性
    HTML5(H5)是HTML标准的第五个版本,引入了许多新特性和改进,以下是一些H5的新特性:语义化标签:H5引入了一系列新的语义化标签,如<header>、<footer>、<nav>、<article>等,有助于更清晰地描述页面结构和内容。视频和音频支持:H5提供了<video>和<audio>标签,可以直接在网页中嵌入视频和音......
  • HTML5 Canvas 数据持久化存储之属性列表
    正常我们设置属性的时候,属性和属性值的keyvalue对应,但是在实际开发中,经常遇到属性值可能需要从多项中选择,这个时候用原生的HTML5配合JavaScript来实现这个功能会让人非常头疼,我试着用 HTforWeb 来实现了这个功能,感觉整体实践起来还是比较容易的,所以在这边跟大家分享一......
  • web前端HTML中五种网页跳转的方法
    单自动跳转法对于表单大家都很熟悉,就是将表单中填写的内容,提交到action参数中指定的url地址中,目标url再对接收到的数据进行处理。利用这一点,我们可间接的实现网页跳转,只不过,我们并不需要提交任何表单内容。再结合javascript脚本,可以对表单进行自动提交。示例如下:cript>其中form1名......
  • html属性选择器
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <title>Document</title> <sty......
  • html组合选择器
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <title>Document</title>  <s......
  • webpack--loader
    引言因为webpack默认只能解析js资源,当我们要处理css等资源时,无法进行处理,所以我们就要通过loaderloader来载入加载器来对相应的资源做特定的解析。报错案例例如:我们直接在js中引入css文件再次编译时,会报错。index.css.box1{width:100px;height:100px;backgr......