代码
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工具类