Vue 项目设置生产环境取消 console、debugger 语句控制台输出

开发过程中，经常需要使用console.log、console.info、alert等操作来输出内容，测试代码，而在生产环境之中，这些打印的东西最好是不要显示、特别是用户名、密码相关。

一个个去删除、注释显然是很麻烦的一件事，所以我们可以通过修改配置变量，实现在开发环境打印，而生产环境不打印。

修改方法如下：
在项目的build/webpack.prod.conf.js文件之中，找到UglifyJsPlugin配置，在compress中添加如下代码即可。

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false,
      // 打包的时候移除console、debugger
      drop_debugger: true, // 移除debugger
      drop_console: true, // 移除console
      pure_funcs: ['console.log','console.info']
    }
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true
}),

在前端项目开发过程中，为优化用户体验，可考虑在用户输入查询条件后按回车键实现搜索效果。实现方法如下：

el-input 监听键盘按下状态得用@keyup.enter.native，如果是非el-input 组件，可以直接用@keyup.enter。

<el-input @keyup.enter.native="search" v-model='form.searchAttr' ></el-input>

<input @keyup.enter="search" ></el-input>

若取消绑定 el-button 的回车键事件，可以使用 @keyup.enter 来指定按下回车时不执行任何操作。

<template>
  <div>
    <!-- 其他内容 -->
    <el-button @click="handleClick" @keyup.enter.native.prevent></el-button>
    <!-- 其他内容 -->
  </div>
</template>
 
<script>
export default {
  methods: {
    handleClick() {
      // 处理点击事件的逻辑
    }
  }
}
</script>

在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。