vue程序中如何设置调用springboot服务的url

在Vue程序中调用Spring Boot服务的URL，可以通过以下步骤实现：

安装Axios:
Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js。可以使用npm或yarn安装Axios。
```
npm install axios
# or
yarn add axios
```

创建Axios实例:
为了方便管理和复用，可以创建一个Axios实例并配置基础URL和其他选项。在Vue项目的src目录下创建一个文件，比如src/axios.js:

import axios from 'axios';const instance = axios.create({baseURL: 'http://localhost:8080/api', // 替换为你的Spring Boot服务的URLtimeout: 10000, // 请求超时时间headers: {'Content-Type': 'application/json'}
});export default instance;

在组件中使用Axios实例:
在Vue组件中引入并使用这个Axios实例进行HTTP请求。

<template><div><button @click="fetchData">Fetch Data</button><div v-if="data">{{ data }}</div></div>
</template><script>
import axios from '@/axios'; // 引入刚才创建的axios实例export default {data() {return {data: null,};},methods: {async fetchData() {try {const response = await axios.get('/your-endpoint'); // 替换为你的Spring Boot服务的具体endpointthis.data = response.data;} catch (error) {console.error('Error fetching data:', error);}},},
};
</script>

配置环境变量:
为了在开发和生产环境中方便地切换API的base URL，可以使用环境变量。在Vue项目根目录下创建.env文件（对于开发环境）和.env.production文件（对于生产环境）:

# .env
VUE_APP_BASE_API=http://localhost:8080/api# .env.production
VUE_APP_BASE_API=https://your-production-url/api

修改axios.js文件以使用环境变量:

import axios from 'axios';const instance = axios.create({baseURL: process.env.VUE_APP_BASE_API, // 使用环境变量timeout: 10000,headers: {'Content-Type': 'application/json'}
});export default instance;