envatt-webpack-loader

安装

npm install envatt-webpack-loader -D

配置：以Vue-cli为例，webpack配置同理

1.配置vue.config.js

const areaName = process.env.VUE_APP_AREA || 'XXX'
...
chainWebpack: config => {
    config.module
      .rule('app-env')
      .test(/.(vue|js)$/)
      .pre() // 重要，一定要在最开始调用
      .include
        .add(resolve(__dirname, 'src'))
        .end()
      .use('app-env')
        .loader('envatt-webpack-loader')
        .options({areaName: areaName}) // 传入环境变量
        .end()
  }
...

2.配置环境变量

创建.env.[mode]文件，例如：.env.A

VUE_APP_AREA=这是A环境

.env.B

VUE_APP_AREA=这是B环境

package.json配置：

"serve:A": "vue-cli-service serve --mode A",
"serve:B": "vue-cli-service serve --mode B",

3.使用：以Vue项目为例

<template>
  <div class="home">
    <!-- 这个代码不会被条件注释识别 -->
    <h1>这个代码不会被条件注释识别</h1>

    <!--  #ifdef 这是A环境 -->
      <h1>这是A环境的代码</h1>
    <!--  #endif -->

    <!--  #ifdef 这是B环境 -->
      <h1>这是B环境的代码</h1>
    <!--  #endif  -->

    <p>Hello</p>

    <button @click="handleAlert">Click Me</button>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  methods: {
    handleAlert() {
      // #ifdef 这是A环境
      alert('这是A环境的代码')
      // #endif


      // #ifdef 这是B环境
      alert('这是B环境的代码')
      // #endif
    }
  }
}
</script>