vue-cli3 条件编译
npm install @xohu/vue-cli-plugin-ifdef
vue add @xohu/ifdef
or
npm install @xohu/vue-cli-plugin-ifdef -D
or
cnpm install @xohu/vue-cli-plugin-ifdef -D
`
$3
可以通过 vue.config.js > pluginOptions.ifdefConfig 进行配置
` js
// 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'
}
}
}
}
`
$3
`
.vue
.js
.css
各预编译语言文件,如:.scss、.less、.stylus
`
$3
`
-- 不同语法中的注释,请严格区分使用
js 使用 // 注释
css 使用 / 注释 /
vue template 使用
-- js
// #ifdef module1
内容
// #endif
-- css
/ #ifdef module2 /
内容
/ #endif /
-- vue template
内容
`
`
#ifdef module
#ifdef !module
#ifdef client == 'admin'
#ifdef client != 'admin'
#ifdef module1 || module2
`
$3
`
使用此插件时,请检查是否有其它插件过滤掉了注释,因为条件编译的判断条件是需要注释去实现的
``