專案中使用引入檔案有時候路徑比較深，需要使用"../../../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
      }
     }
    })
   ]
  }
 },}

以上就是本次介紹的Vue引入Stylus的全部知識點，感謝大家的學習和對我們的支援。