首页 新闻 会员 周边 捐助

vue+element ui的样式条件编译

-1
悬赏园豆:10 [已关闭问题] 关闭于 2019-12-11 23:06

js的条件编译

  • 安装
npm i -D js-conditional-compile-loader
  • 配置webpack

webpack.base.conf.js文件中在rules配置编译条件如下

module: {
    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。
在项目代码中设置如下

{ name: '用户部门', value: 'usrDepartId' },
   /* IFTRUE_isHK */
  { name: '舱门管理', value: 'id' },
  /* FITRUE_isHK */
  { name: '手机号', value: 'telphone' },
  • 编译执行

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

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

样式的条件编译

问题来了,样式的条件编译我想用以下两个方式实现,都遇到了问题,请大神指点:
对vue接触时间较短,框架底层不了解,不知道怎么进行设置,在线等

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时,在哪设置全局变量versionType=1(执行不同分支代码,实现1hk、2nt)
以下代码为全局变量,需要在哪设置:

   /* IFTRUE_isHK */
  Var versionType=1,
  /* FITRUE_isHK */
  /* IFTRUE_isNT */
  Var versionType=2,
  /* FITRUE_isNT */
浪潮行舟的主页 浪潮行舟 | 初学一级 | 园豆:83
提问于:2019-12-07 16:04
< >
分享
所有回答(2)
0

样式条件编译最终还是设置全局变量,通过js条件编译与样式条件渲染实现样式的条件编译

浪潮行舟 | 园豆:83 (初学一级) | 2019-12-11 23:05
0

不需要给style-loader、css-loader增加插件的配置,在webpack内部这些都会自动转换成js,也就自动会条件编译,只需要配置 js的rule即可。

东篱南山 | 园豆:208 (菜鸟二级) | 2021-03-15 17:12
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册