Vue.config.js 的幾種配置方式

Vue Cli 是 Vue 官方基於 Webpack 推出的腳手架工具，省去了我們配置的時間，可以直接簡易上手開發。到目前為止(2022年2月13日) Vue Cli仍然是基於 Webpack 搭建的，官方腳手架尚未使用 Vite

那么當我們對 Vue CLI 默認配置不滿意的時候，就需要自行修改配置了。幸運的是我們可以通過在根目錄下創建 vue.config.js來進行自定義配置，這個文件會和原配置進行合並。

而在 vue.config.js 中，我們可以通過三種方式進行配置

話不多少，下面直接上代碼

配置方式一：Vue-CLI提供的屬性

https://cli.vuejs.org/zh/config/#vue-config-js

module.exports = {
  publicPath: './'
  // ...其他見文檔
}

配置方式二：configureWebpack

2.1 configureWebpack 傳遞一個對象，對象內部屬性和 webpack 屬性完全一致，最后使用webpack-merge進行合並
參考: https://cli.vuejs.org/zh/config/#configurewebpack

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components',
      }
    }
  }
}

2.2 configureWebpcak 傳遞一個函數，對原來的配置進行覆蓋重寫

module.exports = {
  configureWebpack: (config) => {
    config.resolve.alias = {
      '@': path.resolve(__dirname, 'src'),
      components: '@/components'
    }
  }
}

配置方式三: 鏈式編程

chainWebpack(config) {
    return config.resolve.alias
        .set('@', path.resolve(__dirname, 'src'))
        .set('components', '@/components')
}