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

一、在 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")
}

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

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