vue的index.html中获取环境变量和业务判断_vue項目的index.html文件怎么获取一个全局变量的值?-CSDN博客

index.html中只能使用 <%= VUE_APP_xxx %> 或<%- VUE_APP_xxx %> 字符串获取到，官网有解释

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, minimum-scale=1">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>微视频后台管理</title>
    
    <!-- 下面是判断 ------------------------------------------------------>
    
    <% if (process.env.VUE_APP_RUN_ENV === 'production' ) { %>
      <script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
      <script type="text/javascript" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=V6VBZ-KD2OW-ATORL-RRKFW-QICF2-O3B7H"></script>
      <script type="text/javascript" src="https://map.qq.com/api/gljs?v=1.exp&key=V6VBZ-KD2OW-ATORL-RRKFW-QICF2-O3B7H"></script>
      <script>
        console.log("生产环境");
      </script>
    <% } else if (process.env.VUE_APP_RUN_ENV === 'test')  {%>
      <script>
        console.log("测试环境");
      </script>
    <% } else {%>
      <script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
      <script type="text/javascript" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=6EEBZ-3EUCD-XZP4T-PKTRG-GUY47-ROFC3"></script>
      <script type="text/javascript" src="https://map.qq.com/api/gljs?v=1.exp&key=6EEBZ-3EUCD-XZP4T-PKTRG-GUY47-ROFC3"></script>
      <script>
         console.log("本地开发环境:",'<%= VUE_APP_RUN_ENV %>');
         console.log("本地开发环境2:",'<%- VUE_APP_RUN_ENV %>');
      </script>
    <% } %>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>