vue 生产环境中项目打包bulid 移除 console.log 【babel-plugin-transform-remove-console】

最新推荐文章于 2024-02-02 11:27:55 发布

半生过往

最新推荐文章于 2024-02-02 11:27:55 发布

阅读量760

点赞数 13

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/estrusking/article/details/128528214

版权

vue 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

本文介绍了如何在Vue项目中通过npm安装并配置Babel插件transform-remove-console，以在生产环境移除console输出。通过检查NODE_ENV变量判断环境，仅在生产模式下启用该插件。

摘要由CSDN通过智能技术生成

github地址
安装babel-plugin-transform-remove-console 项目打包去除console

npm install babel-plugin-transform-remove-console --save-dev

在vue项目中babel.config.js中：

module.exports = {
  plugins: [
    "transform-remove-console",
  ],
}

如果只想在生产环境来去除console的话
建立一个生产环境配置数组来判断一下当前环境是否为生产环境，

是生产环境的话就放入transform-remove-console

在 serve 执行中会输出 $ vue-cli-service serve --mode development--dashboard
在 bulid 执行中会输出 $ vue-cli-service build --mode production --target app --no-module --dashboard
区分 development 和 production

// 创建生产环境中的plugins数组  发布阶段需要用到的 Babel插件
const prodPlugins = [];
// 判断当前环境是否为生产环境 如果是生产环境把transform-remove-console放入数组中
if (process.env.NODE_ENC === "production") {
  prodPlugins.push("transform-remove-console");
}
 
module.exports = {
  plugins: [
    // 生产环境下plugins 扩展运算符把数组展开
    ...prodPlugins,
  ],
};