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')
}