html中定义并使用环境变量使用场景相信大家都看过这样的html代码: 上面代码通过 TEST_PATH 变量来控制引

使用场景

相信大家都看过这样的html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    ...
    <script src="<%= TEST_PATH %>/js/common/xxx.js?v=<%= Date.now() %>">
    ...
</head>
<script>
  ...
</script>
</body>
</html>

上面代码通过 TEST_PATH 变量来控制引入的 xxx.js的环境，当 TEST_PATH=//aaa.com时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    ...
    <script src="//aaa.com/js/common/xxx.js?v=<%= Date.now() %>">
    ...
</head>
<script>
  ...
</script>
</body>
</html>

<% ？%>是什么

<% ? %>是ASP的语法

ASP（Active Server Pages 动态服务器页面）是一种生成动态交互性网页的强有力工具。
ASP 文件可包含文本、HTML 标签和脚本。ASP 文件中的脚本可在服务器上执行。

在里面可以写你的js代码

<!DOCTYPE html>
<html>
<body>
<%
  alert('测试弹框')
%>
</body>
</html>

怎样定义变量

一般情况下我们通过webpack中的

Webpack.DefinePlugin

定义全局变量：

import * as Webpack from 'webpack'

module.exports = {
  entry: ['./src/main.ts'],
  output: {},
  ...
  plugins: [
    new Webpack.DefinePlugin({
      // prd环境使用 aaa.com，否则使用 //bbb.com
      TEST_PATH: process.env.NODE_ENV === 'production' ？ '//aaa.com' : '//bbb.com'
      
    })
  ],
  ...
}

这样我们就可以在构建webpack项目的时候在入口html文件用使用

TEST_PATH

变量了！