使用 vue-cli 3.0 (@vue/cli) 腳手架構(gòu)建的項(xiàng)目，一般在本地開發(fā)過程中，會(huì)有不少 console 調(diào)試信息。如果不處理這些日志信息，默認(rèn)情況下，即使是構(gòu)建生產(chǎn)環(huán)境的包，這些 console 打印也不會(huì)被移除，這顯然是不夠嚴(yán)謹(jǐn)?shù)?。所以就介紹一下怎么來配置根據(jù)環(huán)境刪除 console 日志。

vue remove console

一、項(xiàng)目依賴

{
  "dependencies": {
    "axios": "^0.18.1",
    "echarts": "^5.3.3",
    "element-ui": "^2.15.9",
    "v-clipboard": "^2.2.3",
    "vue": "^2.7.10",
    "vue-router": "^3.6.5",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.1",
    "@vue/cli-plugin-eslint": "^3.12.1",
    "@vue/cli-service": "^3.12.1",
    "compression-webpack-plugin": "^3.0.0",
    "html-webpack-externals-plugin": "^3.8.0",
    "less": "^3.13.1",
    "less-loader": "^4.1.0",
    "msw": "^0.47.3",
    "msw-tools": "latest",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "vue-template-compiler": "^2.7.10",
    "webpack-bundle-analyzer": "^4.7.0"
  }
}

二、配置

1. 下載 babel-plugin-transform-remove-console 包

npm i -D babel-plugin-transform-remove-console

2. 配置 babel.config.js

const plugins = []
if (process.env.NODE_ENV === 'production') {
  plugins.push('transform-remove-console')
}

module.exports = {
  presets: ['@vue/app'],
  plugins: [...plugins],
}

3. 完成，npm run build 打包體驗(yàn)。

歡迎訪問：天問博客