Vue项目打包后取出console详解

项目打包上线后我们不希望这些输出结果被用户所看到，可以通过以下方式来过虑掉console输出内容（步骤详解）

1.安装插件

npm install babel-plugin-transform-remove-console --save-dev
或者
yarn add babel-plugin-transform-remove-console --save-dev

2.修改项目根目录中 babel.config.js 配置

// 定义一个空数组，用于判断是'项目阶段development'还是'生产上线阶段production'
const ArrPlugins = [];
// 如果当前是测试环境或者是生产环境，则使用去掉 console 的插件
if (process.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'production') {
    ArrPlugins.push('transform-remove-console');  //去掉 console 的插件功能代码
}
module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins:[

  //如果是项目阶段，则ArrPlugins扩展后为空数组，如果是上线阶段，则ArrPlugins扩展后去掉 console
        ...ArrPlugins
    ]
}

3.修改基本打包配置允许dist双击打开

需要新建 vue.config.js , 配置打包后, 相对路径访问资源 (配置允许双击打开)

// 覆盖默认的webpack配置
module.exports = {
  publicPath: './',   //直接双击dist文件夹中index.html后打开页面
  devServer: {
    port: 3000,       //修改默认端口号
    open: true       // 项目启动后自动打开页面
  }
}