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 } }, ] }, //other rules ] }
- 项目中使用
插件支持IFDEBUG和IFTRUE两个条件编译指令。用法是:在js代码的任意地方以/IFDEBUG或/IFTRUE_xxx开头,以FIDEBUG/或FITRUE_xxx/结尾,中间是被包裹的js代码。xxx是在webpack中指定的条件属性名,如上面的isHK。
在项目代码中设置如下
{ name: '用户部门', value: 'usrDepartId' }, { name: '舱门管理', value: 'id' }, { 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 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)
以下代码为全局变量,需要在哪设置:
Var versionType=1, Var versionType=2,
想要实现样式的条件编译,用的vue+element ui
比如同一套代码,有个列表显示数据不一致,修改内容的时候文本框内容不一致
待解决
悬赏分:20
- 离问题结束还有 158天20小时25分38秒
点赞 0反对 0举报 0
收藏 0
分享 6
