vue项目上线优化之在build以及生产发布阶段如何移除console

r囧r小猫 2023-05-28 06:59 1阅读 0赞

#### 一、在 build 命令执行期间移除所有的 console ####

1.  通过 `npm install babel-plugin-transform-remove-console --save-dev`命令下载工具包
2.  在项目的 `babel.config.js` 文件中，在 `plugins` 中，添加 `"transform-remove-console"`，代码如下：

module.exports = { 
        presets: ["@vue/app"],
        plugins: [
            [
                 "component",
                 { 
                     "libraryName": "element-ui",
                     "styleLibraryName": "theme-chalk"
                 }
            ],
            // 在 build 阶段清除所有的 console
            "transform-remove-console"
        ]
    }

#### 二、 只在生产发布阶段移除所有的 console ####

1.  通过 `npm install babel-plugin-transform-remove-console --save-dev`命令下载工具包
2.  在项目的 `babel.config.js` 文件中，定义 `prodPlugins` 数组，默认为空。如果属于 `production`正式生产环境，程序最终发布后所需要的参数配置，一般不会产生太多无用的日志记录，那么就可以将 `"transform-remove-console"` 添加到 `prodPlugins`数组中，代码如下：

// 项目发布阶段需要用到的 babel 插件
    const prodPlugins = []
    if (process.env.NODE_ENV === 'production') { 
        prodPlugins.push("transform-remove-console")
    }

1.  在项目的 `babel.config.js` 文件中，在`plugins` 中，使用 `prodPlugins`，代码如下：

module.exports = { 
        presets: ["@vue/app"],
        plugins: [
            [
                 "component",
                 { 
                     "libraryName": "element-ui",
                     "styleLibraryName": "theme-chalk"
                 }
            ],
           // 发布产品时候的插件数组
            ...prodPlugins
        ]
    }