VUE 条件编译

   　　　　—般情况下,C语言源程序中的每一行代码.都要参加编译。但有时候出于对程序代码优化的考虑.希望只对其中一部分内容进行编译.此时就需要在程序中加上条件，让编译器只对满足条件的代码进行编译，将不满足条件的代码舍弃，这就是条件编译（conditional compile）。 

                                                                                                                                                                                                                                                                                                                                                                         ----摘自百度百科

 

　　　　条件编译对于后端程序猿来说可能都比较熟悉，那么VUE项目可以条件编译么？ 答案是肯定的。 今天就把自己花了不少工夫的结论整理出来，供有需要的朋友参考。

 

               VUE项目要实现条件编译需要三个基本的步骤   1 前置条件    2 配置   3 使用

 

                前置条件

                      2个插件

js-conditional-compile-loader
      一个条件编译的webpack loader, 支持按条件构建各种代码文件，如js、ts、vue、css、scss、html等。
cross-env
     运行跨平台设置和使用环境变量的脚本。

安装插件
npm i -D js-conditional-compile-loader
npm i -D cross-env

 

　　      配置

                  vue.config.js

let timestamp = new Date().getTime(); //当前时间为了防止打包缓存不刷新，所以给每个js文件都加一个时间戳
// vue.config.js
module.exports = {
  //设置输出目录
  outputDir: process.env.ENV_CONFIG === "public" ? "distPublic" : "distPrivate",

  // 对webpack的设置,该对象将会被 webpack-merge 合并入最终的 webpack 配置。
  configureWebpack: {
    output: {
      filename: `js/[name].${timestamp}.js`, // 每次构建打包时给文件名加上时间戳，确保每次版本更新的文件名不一样
      chunkFilename: `js/[name].${timestamp}.js`,
    },
  },

  //更细粒度的控制其loader内部配置
  chainWebpack: (config) => {
    let vueRule = config.module.rule('vue')
    vueRule
      .use("js-conditional-compile-loader")
      .loader("js-conditional-compile-loader")
      .tap(() => {
        return {
          // isDebug: process.env.NODE_ENV === "development", // optional, this expression is default   development  production
          public: process.env.ENV_CONFIG === "public", // any prop name you want, used for /* IFTRUE_public ...js code... FITRUE_public */
        };
      })
      .end();
  },
};

 

 

          package.json 

 

"scripts": {
    "serve": "cross-env ENV_CONFIG=public vue-cli-service serve",
    "build-public": "cross-env ENV_CONFIG=public vue-cli-service build",
    "build-private": "cross-env ENV_CONFIG=private vue-cli-service build",
    "lint": "vue-cli-service lint
 }

 

 

　  使用

<template>
  <div class="hello">
    /*IFTRUE_public*/
    <div class="public">公有云</div>
    /*FITRUE_public*/

    <div class="public private">私有云</div>
  </div>
</template>

<script>
export default {
  mounted() {
    /*IFTRUE_public*/
    console.log(1111111);
    /*FITRUE_public*/

    console.log(2222222222);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*IFTRUE_public*/
.public {
  color: red;
} /*FITRUE_public*/

.private {
  font-size: 40px;
}
</style>