vue-ts版生產環境屏蔽日誌

一、vue-ts版生產環境屏蔽日誌

1. 場景

我們都知道，隨着開發的調試，我們需要在前端業務邏輯的代碼中打印各種接口返回或者邏輯處理的過程日誌。通過這些日誌來幫助我們驗證業務功能是否正常實現，是否存在bug，即使出現問題，也能快速定位問題，解決問題。但是在生產環境中，項目屬於發佈外網，如果再開放這些日誌，很明顯不合適。別有用心的人，看到你這些打印的數據，進行破壞性操作，造成系統運行崩潰都是有可能的，那就需要我們在生產上就行日誌屏蔽，在開發環境，進行日誌的打開。

2. 解決方案

• 方案一：全局變量控制或者直接通過環境變量來控制

  • 全局定義一個Flag，作爲是否打開日誌的標識。
  • 通過環境的變量來控制這個標識是否打開。

• 方案二：通過babel-plugin-transform-remove-console來控制

  • 安裝插件

    $ npm i babel-plugin-transform-remove-console --save-dev
    

  • 配置babel.config.js

    const pluginsTemp = [
      [
        'component',
        {
          libraryName: 'element-ui',
          styleLibraryName: 'theme-chalk',
        },
      ],
    ];
    // 如果是生產環境將日誌插件加入
    if (process.env.NODE_ENV === 'prod') {
      pluginsTemp.push('transform-remove-console');
    }
    
    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset',
      ],
      plugins: pluginsTemp,
    };
    

  • build之後，生產測試，發現果然不存在測試環境中的打印日誌