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

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

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

   npm install axios
   # or
   yarn add axios
   

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

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

3. 在组件中使用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服务的具体endpoint
           this.data = response.data;
         } catch (error) {
           console.error('Error fetching data:', error);
         }
       },
     },
   };
   </script>
   

4. 配置环境变量:
   为了在开发和生产环境中方便地切换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;
   

这样，Vue应用程序就可以根据不同的环境自动切换调用Spring Boot服务的URL。通过使用Axios进行HTTP请求，你可以轻松地与后端服务进行通信。