1.   想在生产环境打log的缘由是因为tinyEditor在开发环境和生产环境不同的迷惑表现，开发环境正常，但是生产环境双向绑定的model值不能正确获取：编辑器输入内容保存的时候拿不到输入的值；有时候model值设置为空，但页面又会展现之前输入的值，这个问题最后通过看文档，给component加initial-value和model-events解决了。
    1. <Editor
    2.    v-model={this.formState.content}
    3.    api-key={"e0n1to913o8ujy31ywqi04oukjec70aqiubp2ofux0562247"}
    4.    initial-value=""
    5.    model-events="change keydown blur focus paste"
    6.    init={EDITOR_INIT}
    7. />

    但看到问题时，第一反应是debug看看model的值到底是什么。虽然错误的方向导致不能很快解决问题，但通过这次调试，可以对Vue CLI的打包机制做一些深入了解。Vue CLI封装了webpack，通过vue.config.js暴露几个重要的配置入口，对webpack的规则进行修改，一个是configureWebpack，一个是chainWebpack。Vue CLI内部的webpack配置通过webpack-chain维护的。这个库提供一个webpack原始配置的上层抽象，使其可以定义具名的loader规则和具体插件，并有机会在后期进入这些规则并对他们的选项进行修改。
    具体教程可以参考官网文档：https://cli.vuejs.org/zh/guide/webpack.html
    TerserWebpackPlugin使用terser来压缩javascript，现在我们的项目使用webpack v5，所以不需要安装这个插件，webpack v5自带最新的terser-webpack-plugin，所以想修改webpack的内部规则，通过chainWebpack设置即可。请注意，webpack v5的webpack-chain已从v4更新到v6，最明显的变化是minimizer配置。

    1. module.exports = {
    2.   chainWebpack: (config) => {
    3.     config.optimization.minimizer('terser').tap((args) => {
    4.       args[0].terserOptions.compress.drop_console = true
    5.       return args
    6.     })
    7.   }
    8. }

    不同版本的写法，更多参考https://cli.vuejs.org/migrating-from-v3/#vue-cli-service

    总结：由于版本升级，导致网上很多文章都失效了，但文章中又不会标注版本，导致浪费一些时间去调试。其实一些问题的解决方案文档中都会有说明，普遍的问题也会在issue中讨论，热心网友会给出答案。
    还是要提高自己定位问题，快速搜寻 问题解决方案的能力。