代码

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

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8888,
    // 配置代理
    proxy: {
      '/api': {
        // 以 “/api” 开头的 代理到 下边的 target 属性 的值 中
        target: 'http://127.0.0.1:8080/',
        changeOrigin: true, // 是否改变域名：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        ws: true, // 是否启用websockets
        pathRewrite: {
          // 路径重写
          '^/api': '' // 用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'http://127.0.0.1:8080/user/add'
        }
      }
    }
  },
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ]
  }

})

修改部分

业面代码

假设vue项目的地址是：localhost:80/，比如，页面中请求'http://127.0.0.1:8080/api/user/ss'时，地址只需要写为'/api/user/ss'就可以了。

示例代码：

服务器端

@PostMapping("/login0")
public Result login0(@RequestParam String username, @RequestParam String password){
    System.out.println(username+" "+password);
    	return ResultUtil.success();
	}
	@PostMapping("/login")
	public Result login(@RequestBody User user) {
		return ResultUtil.success();
	}
}

vue端

<template>
  <el-button @click="fun1">单击</el-button>
  <el-button @click="fun2">单击</el-button>
</template>

<script>
import {post,postJson} from '@/utils/axios'

export default {
  name: 'Demo',

  setup () {
    const fun1 = () => {
      post('/api/user/ss', {
        username: 'zhangsan',
        password: '1234'
      }).then(res => {
       console.info(res)
      })
    }

    const fun2 = () => {
      postJson('/api/user/login', {
        username: 'zhangsan',
        password: '1234'
      }).then(res => {
        console.info(res)
      })
    }
    return { fun1,fun2 }
  }
}
</script>

注：axios工具类的代码请参考博客：axios工具类