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>