vue项目配置后端地址

// 在 Vue 项目中配置后端地址，通常可以通过在 `src` 目录下创建一个 `config.js` 文件来实现。
// 这样可以方便地管理不同环境下的 API 地址。

// src/config.js
export default {
  // 开发环境的 API 地址
  devApiUrl: 'http://localhost:3000/api',

  // 生产环境的 API 地址
  prodApiUrl: 'https://production-server.com/api'
}

// 然后在你的 main.js 或其他入口文件中引入这个配置文件，并根据当前环境选择合适的 API 地址。
// main.js
import Vue from 'vue'
import App from './App.vue'
import config from './config'

Vue.config.productionTip = false

let apiUrl;
if (process.env.NODE_ENV === 'production') {
  apiUrl = config.prodApiUrl;
} else {
  apiUrl = config.devApiUrl;
}

new Vue({
  render: h => h(App),
  data: {
    apiUrl
  }
}).$mount('#app')

// 接下来，在你的组件或 Vuex store 中，你可以通过 this.$root.apiUrl 来访问配置的 API 地址。
// 例如：
// methods: {
//   fetchData() {
//     axios.get(`${this.$root.apiUrl}/data`)
//       .then(response => {
//         console.log(response.data);
//       })
//       .catch(error => {
//         console.error(error);
//       });
//   }
// }

解释说明：

1. 配置文件：我们创建了一个 config.js 文件来存放不同环境下的 API 地址。这样做的好处是可以在开发和生产环境中轻松切换 API 地址，而无需修改代码中的硬编码 URL。

2. 环境变量判断：在 main.js 中，我们通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境，并据此选择对应的 API 地址。

3. 全局访问：我们将 API 地址挂载到了 Vue 实例的根数据对象上 (this.$root.apiUrl)，这样在整个应用中都可以方便地访问到 API 地址。

4. 使用示例：在组件的方法中，可以直接通过 this.$root.apiUrl 来构建完整的 API 请求 URL。