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>