configureWebpack配置alias別名的兩種方式

vue-cli 3.X webpack配置(resolve.alias的配置)

1、configureWebpack對象形式

configureWebpack:{
  resolve: {
    // 別名配置
    alias: {
      'assets': '@/assets',
      'common': '@/common',
      'components': '@/components',
      'network': '@/network',
      'configs': '@/configs',
      'views': '@/views',
      'plugins': '@/plugins',
    }
  }
},

2、configureWebpack函數形式

configureWebpack: (config) => {
   if (process.env.NODE_ENV === 'production') {
     // 爲生產環境修改配置...
     config.mode = 'production'
   } else {
     // 爲生產環境修改配置...
     config.mode = 'development'
   }
   // 開發生產共同配置別名
   Object.assign(config.resolve, {
     alias: {
       '@': path.resolve(__dirname, './src'),
       'assets': path.resolve(__dirname, './src/assets'),
       'common': path.resolve(__dirname, './src/common'),
       'components': path.resolve(__dirname, './src/components'),
       'network': path.resolve(__dirname, './src/network'),
       'configs': path.resolve(__dirname, './src/configs'),
       'views': path.resolve(__dirname, './src/views'),
       'plugins': path.resolve(__dirname, './src/plugins'),
     }
   })
 },

詳細說明

使用vue-cli3.x及以上版本與vue-cli2.x進行項目構建的區別之一，是生成的項目中，進行webpack配置的文件沒有了。由於3.x，將大部分相同的webpack配置，已封裝到cli安裝包中。

若想添加一些本身的項目配置，只需在項目的根目錄下新建一個vue.config.js文件便可，內容以下:

module.exports = {  
  outputDir: 'dist', //打包文件輸出路徑，即打包到哪裏 
  assetsDir: 'static',  // 靜態資源地址  
  lintOnSave: false, // eslint-loader 是否在保存的時候檢查  
  productionSourceMap: false, // 生產環境是否生成 sourceMap 文件
  filenameHashing: true, //文件hash
  // chainWebpack 這個庫提供了一個webpack原始配置的上層抽象，使其能夠定義具名的 loader規則和具名插件，
  // 能夠經過其提供的一些方法鏈式調用，在cli-service中就使用了這個插件
  chainWebpack: () => {},
  /* configureWebpack是調整webpack配置最簡單的一種方式，能夠新增也能夠覆蓋cli中的配置。
     能夠是一個對象：被 webpack-merge 合併到 webpack 的設置中去
     也能夠是一個函數：若是你須要基於環境有條件地配置行爲，就能夠進行一些邏輯處理，能夠直接修改或新增配置，(該函數會在環境變量被設置以後懶執行)。該方法的第一個參數會收到已經解析好的配置。在函數內，能夠直接修改配置，或者返回一個將會被合併的對象。
  */  
  configureWebpack: {}
}

配置 import 和 require 等路徑別名。

webpack 中是經過 resolve.alias 來實現此功能的，參考： https://www.webpackjs.com/con...。

在vue-cli3.x中咱們能夠經過如下幾種方式實現：

1.直接修改 cli-service 文件，添加webpack的相關配置。

按圖片中路徑打開 base.js 文件：

能夠經過set方法添加想要的 alias 配置，不推薦此方式。

2.在vue.config.js 中使用 chainWebpack 的方式

const path = require('path')
function resolve (dir) {
  //此處可以使用 path.resolve 或 path.join
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {
    ...
  },
  lintOnSave: false, // eslint-loader 是否在保存的時候檢查
  productionSourceMap: false, // 生產環境是否生成 sourceMap 文件
  filenameHashing: true, //文件hash
  chainWebpack: config => {
    config.resolve.alias
    // 自定義key,value，如.set('@assets', resolve('src/assets'))
    .set(key,value)
  }
}

3.在 vue.config.js 中使用 configureWebpack 的方式

對象形式，會和cli中的設置合併到一塊兒

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

module.exports = {
  devServer: {
    ...
  },
  lintOnSave: false, // eslint-loader 是否在保存的時候檢查
  productionSourceMap: false, // 生產環境是否生成 sourceMap 文件
   filenameHashing: true, //文件hash
   configureWebpack: {
     resolve: {
       alias: {
         '@assets': resolve('src/assets')
       }
     }
   },
}

函數形式

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

module.exports = {
  devServer: {
    ...
  }, 
  lintOnSave: false, // eslint-loader 是否在保存的時候檢查  
  productionSourceMap: false, // 生產環境是否生成 sourceMap 文件  
  filenameHashing: true, //文件hash
  configureWebpack: config => {
    if (isProduction) {
      ...
    } else {
      ...
    }
    //直接修改配置
    config.resolve.alias['@asset'] = resolve('src/assets')
  }
}

或者：

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

module.exports = {
  devServer: {
    ...
  }, 
  lintOnSave: false, // eslint-loader 是否在保存的時候檢查
  productionSourceMap: false, // 生產環境是否生成 sourceMap 文件
  filenameHashing: true, //文件hash
  configureWebpack: config => {
    if (isProduction) {
      ...
    } else {
      ...
    }
    //返回一個將要合併的對象
    return {
      resolve: {
        alias: {
          '@asset':resolve('src/assets')
        }
      }
    } 
  }
}

最好不要使用下面的方式，由於Object.assign方法在合併對象時，若是目標對象（config）上有相同的屬性（resolve），將會被覆蓋掉。不過這樣寫 Object.assign(config.resolve,{alias:{}}) 仍是能夠的，只是覆蓋掉了alias。

Object.assign(config, {
  resolve: {
    alias: {
      '@': resolve('./src'),
      '@assets': resolve('./src/assets')
    }
  }
})

合併後，變成：

alias: {
  '@': resolve('./src'),
  '@assets': resolve('./src/assets')
}

可是 cli-service 中 resolve 被覆蓋掉後，它的其餘屬性將會消失。