vue.config.js配置別名alias、配置生產環境清除console

項目中使用引入文件有時候路徑比較深，需要使用"../../../xx.js"這種類似的路勁引入，這種方式比較笨，可以使用webpack的別名alias配置來解決。

首先，先確定項目中是否有path模塊：

如果沒有path模塊需要先安裝path

npm  install  path  --save

 

 以下為vue.config.js配置

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("base", resolve("baseConfig"))
      .set("public", resolve("public"));
  },
}

 項目開發階段經常需要console一些測試數據，查看開發過程中遇到的問題，但生產環境中這些console數據需要清掉，以前操作是項目配置一個全局的標志，判斷是否打印console數據，近期發現一個更簡便的方法，通過webpack配置生產環境自動清除console。

首先，安裝uglifyjs-webpack-plugin插件：

npm  install  uglifyjs-webpack-plugin  --save

其次，在vue.config.js文件引入插件。

最后，配置configureWebpack如下代碼：

 

const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 引入插件

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true, //console
              drop_debugger: false,
              pure_funcs: ["console.log"] //移除console
            }
          }
        })
      ]
    }
  },
}

 這兩個webpack配置還是挺實用的，本人親測有效，希望能夠解決你遇到的問題。