• 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>
  • 相关阅读:
    LAB8 android
    python3速查参考- python基础 1 -> python版本选择+第一个小程序
    selenium三种断言以及异常类型
    selenium+java:获取列表中的值
    selenium测试(Java)--元素操作(五)
    redhat网卡设置
    PYTHON TDD学习(一)-->Python 3.4版本环境安装Django及其启动
    渗透测试
    实用--功能测试方法与实际测试内容
    SQL常见面试题(学生表_课程表_总表)
  • 原文地址:https://www.cnblogs.com/saodiseng2015/p/14899993.html
Copyright © 2020-2023  润新知