—般情况下,C语言源程序中的每一行代码.都要参加编译。但有时候出于对程序代码优化的考虑.希望只对其中一部分内容进行编译.此时就需要在程序中加上条件，让编译器只对满足条件的代码进行编译，将不满足条件的代码舍弃，这就是条件编译（conditional compile）。
----摘自百度百科
条件编译对于后端程序猿来说可能都比较熟悉，那么VUE项目可以条件编译么？ 答案是肯定的。 今天就把自己花了不少工夫的结论整理出来，供有需要的朋友参考。
VUE项目要实现条件编译需要三个基本的步骤 1 前置条件 2 配置 3 使用
前置条件
2个插件
js-conditional-compile-loader
一个条件编译的webpack loader, 支持按条件构建各种代码文件，如js、ts、vue、css、scss、html等。
cross-env
运行跨平台设置和使用环境变量的脚本。
安装插件
npm i -D js-conditional-compile-loader
npm i -D cross-env
配置
vue.config.js
let timestamp = new Date().getTime(); //当前时间为了防止打包缓存不刷新，所以给每个js文件都加一个时间戳
// vue.config.js
module.exports = {
//设置输出目录
outputDir: process.env.ENV_CONFIG === "public" ? "distPublic" : "distPrivate",
// 对webpack的设置,该对象将会被 webpack-merge 合并入最终的 webpack 配置。
configureWebpack: {
output: {
filename: `js/[name].${timestamp}.js`, // 每次构建打包时给文件名加上时间戳，确保每次版本更新的文件名不一样
chunkFilename: `js/[name].${timestamp}.js`,
},
},
//更细粒度的控制其loader内部配置
chainWebpack: (config) => {
let vueRule = config.module.rule('vue')
vueRule
.use("js-conditional-compile-loader")
.loader("js-conditional-compile-loader")
.tap(() => {
return {
// isDebug: process.env.NODE_ENV === "development", // optional, this expression is default development production
public: process.env.ENV_CONFIG === "public", // any prop name you want, used for /* IFTRUE_public ...js code... FITRUE_public */
};
})
.end();
},
};
package.json
"scripts": {
"serve": "cross-env ENV_CONFIG=public vue-cli-service serve",
"build-public": "cross-env ENV_CONFIG=public vue-cli-service build",
"build-private": "cross-env ENV_CONFIG=private vue-cli-service build",
"lint": "vue-cli-service lint
}
使用
<template>
<div class="hello">
/*IFTRUE_public*/
<div class="public">公有云</div>
/*FITRUE_public*/
<div class="public private">私有云</div>
</div>
</template>
<script>
export default {
mounted() {
/*IFTRUE_public*/
console.log(1111111);
/*FITRUE_public*/
console.log(2222222222);
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*IFTRUE_public*/
.public {
color: red;
} /*FITRUE_public*/
.private {
font-size: 40px;
}
</style>