vue.config.js配置路径别名@和跨域proxy

遇到的问题

我用vue-cli5创建一个vue3项目（vue-cli默认是webpack集成），想使用路径别名@和跨域proxy。于是我去网站上各种找，最后发现如下方法。

默认vue.config.js代码

const { defineConfig } = require('@vue/cli-service')


module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

网上找到的解决方法

//配置路径别名
const path = require("path")
module.exports = {
  //修改文件路径
  //publicPath:process.env.NODE_ENV === 'production'?'./':'/',
   publicPath: './',
  //声明配置webpack
  configureWebpack: {
    resolve: {
      //配置路径别名
      alias: {
       "@":path.resolve(__dirname,"src")
      }
    }
  }
}

可以看到默认vue.config.js前面有个defineConfig，但是网上的没找到一个关于defineConfig版本的。 都是直接module.exports={}。我以为这是错误的，最后经过实验是自己发现如下几个方案

方案一：直接在vue.config.js的defineConfig定义

const { defineConfig } = require('@vue/cli-service')
const path = require("path")

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack:{
    resolve:{
      alias:{
        "@":path.resolve(__dirname,"src")
      }
    },
   devServer:{
      proxy:{
        "/api":{
            target:"http://你代码的服务端地址"
        }
      }
    }
  }
})

方案二：删除defineConfig.直接在module.exports上操作

const path = require("path")
module.exports = {
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack:{
    resolve:{
      alias:{
        "@":path.resolve(__dirname,"src")
      }
    },
    devServer:{
      proxy:{
        "/api":{
            target:"http://你代码的服务端地址"
        }
      }
    }
  } 
}