Vue+element ui系列：npm run dev --ld 来实现样式的条件编译，使用到了js-conditional-compile-loader插件-CSDN博客

本文链接：https://blog.csdn.net/I_nur/article/details/130265750

js的条件编译 + 安装

npm i -D js-conditional-compile-loader

配置webpack webpack.base.conf.js文件中

在rules配置编译条件如下

    rules: [
        {
            test: /\.js$/,
            include: [resolve('src'), resolve('test')],
            use: [
                //step-2
                'babel-loader?cacheDirectory',
                //step-1
                    {
                        loader: 'js-conditional-compile-loader',
                        options: {
                            isDebug: process.env.NODE_ENV === 'development', // optional, this is default
                            isHK: process.env.npm_config_hk, // any name, used for /* IFTRUE_isHK ...js code... FITRUE_isHK */
                        }
                    },
                ]
            },
            //other rules
        ]
    }

项目中使用

插件支持IFDEBUG和IFTRUE两个条件编译指令。

用法是：在js代码的任意地方以/IFDEBUG或/IFTRUE_xxx开头，以FIDEBUG/或FITRUE_xxx/结尾，中间是被包裹的js代码。

xxx是在webpack中指定的条件属性名，如上面的isHK。

在项目代码中设置如下


/* IFTRUE_isHK */

{ name: '舱门管理', value: 'id' },

/* FITRUE_isHK */

{ name: '手机号', value: 'telphone' },

编译执行

在终端输入npm run dev –hk 可以看到舱门管理

在终端输入npm run dev 可以看到舱门管理被隐藏

样式的条件编译

问题来了，样式的条件编译我想用以下两个方式实现，都遇到了问题，找了一些资料，最终解决方案是设置 全局变量，然后通过条件渲染实现样式的条件编译：

1. 类似js条件编译，在webpack中进行配置

进行如下设置后，样式的条件编译实现


        test: /\.(css|html|vue)(\?.*)?$/,

        // loader: 'style-loader!css-loader',

        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],         use: [

                //step-2

                'babel-loader?cacheDirectory',

                //step-1

                { loader: 'css-loader',

                        options: {

                               isDebug: process.env.NODE_ENV === 'development', // optional, this is default

                              envTest: process.env.ENV_CONFIG === 'test',

                               isHK: process.env.npm_config_hk,

                               isNT: process.env.npm_config_nt, // any name, used for /* IFTRUE_ntFlag ...js code... FITRUE_ntFlag */

                              npm run build-demo --nt

                          }

        }, ]

},

2. 设置全局变量，通过条件渲染以实现不同效果

比如设置全局变量 versionType为1或2

执行 npm run dev --hk 时versionType为1

执行 npm run dev --nt 时versionType为2

在终端执行 npm run dev –hk 时，在全局变量js文件中设置全局变量versionType=1（执行不同分支代码，实现1hk、2nt）以下代码为全局变量：


Var versionType=1,

/* FITRUE_isHK */

/* IFTRUE_isNT */

Var versionType=2,

/* FITRUE_isNT */

最终实现样式的条件编译，用的同一套代码，有个列表显示数据不一致，通过条件编译实现显示不同的列表