@xohu/vue-cli-plugin-ifdef

此插件剥离自 uni-app，并加以改造以适应 vue-cli

vue-cli3 的条件编译插件

安装

vue add @xohu/ifdef
or
npm install @xohu/vue-cli-plugin-ifdef -D
or
cnpm install @xohu/vue-cli-plugin-ifdef -D

配置

可以通过 vue.config.js > pluginOptions.ifdefConfig 进行配置

// vue.config.js
module.exports = {
  pluginOptions: {
       ifdefConfig: {
        check: true,  // 条件编译开关 - 全局（default：true）
        css: true,    // 条件编译开关 - css（default：css || check）
        js: true,     // 条件编译开关 - js（default：js || check）
        html: true,   // 条件编译开关 - html（default：html || check）
        file: true,   // 条件编译开关 - 静态资源（随 vue-cli3 配置，默认为 public 目录）（default：file || check）
        log: false,   // 是否输出日志 - 项目根目录生成 ifdef.json 文件（default：log || false）
        // 如无特殊需求，上面配置项使用默认即可，不需要配置
        // 以下列出了需要条件编译去验证的自定义模块
        // true：开启条件编译，false：关闭条件编译
        context: {
          module1: true,
          module2: true,
          module3: false,
          client: process.env.VUE_APP_CLIENT,
          admin: process.env.VUE_APP_CLIENT == 'admin'
        }
      }
   }
}

支持的文件

.vue

.js

.css

各预编译语言文件，如：.scss、.less、.stylus

使用方法

-- 不同语法中的注释，请严格区分使用

js            使用 // 注释
css           使用 /* 注释 */
vue template  使用 <!-- 注释 -->

-- js 
// #ifdef module1
内容
// #endif

-- css 
/* #ifdef module2 */
内容
/* #endif */

-- vue template 
<!-- #ifdef module3 -->
内容
<!-- #endif -->

#ifdef module
#ifdef !module

#ifdef client == 'admin'
#ifdef client != 'admin'

#ifdef module1 || module2

注意事项

使用此插件时，请检查是否有其它插件过滤掉了注释，因为条件编译的判断条件是需要注释去实现的