# 环境变量在 html 中应用

# 背景

在开发 H5 项目的时候，不同环境下需要引入不同的 js 包。那么在打包的时候，根据不同的指令设置不同的环境变量。

# 配置步骤

新建环境变量文件.env.test和.env.prod，内容如下

# .env.test
NODE_ENV='production'

VUE_APP_ENV='test'

# .env.prod
NODE_ENV='production'

VUE_APP_ENV='production'

修改package.json指令，读取环境变量

{
  "scripts": {
    "test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build --mode prod"
  }
}

在vue.config.js设置环境变量

// 配置：https://cli.vuejs.org/zh/config/#vue-config-js
module.exports = {
  chainWebpack: config => {
    // 添加参数denv
    config.plugin('html').tap(args => {
      args[0].denv = denv
      return process.env.VUE_APP_ENV
    })
  }
}

在index.html中增加脚本

<body>
  <div id="app"></div>
  <% if ( htmlWebpackPlugin.options.denv === 'test') { %>
  <script src="//cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
  <script>
    var vlog = new window.VConsole()
  </script>
  <script src="//kiscon.top/js/autotrack-test.js"></script>
  <% } %> <% if ( htmlWebpackPlugin.options.denv === 'production') { %>
  <script src="//cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script>
  <script src="//kiscon.top/js/autotrack.js"></script>
  <script>
    if (!window.VConsole && location.href.indexOf('debug=9999') > 0) {
      var vlog = new VConsole()
    }
  </script>
  <% } %>
</body>

← 基于node自动发布 H5实践记录 →