Axios 区分本地和产品？

Question

我正在使用 Vue + axios，但我在设置时遇到了问题，因此基础 url 会根据网站的 url 而有所不同？

所以我的 vue 本地主机当然是：

http://localhost:8080

本地主机的 api 是：

http://webuilder.app

服务器上的vue是：

http://webuilder.co.uk

而 api 是：

http://api.webuilder.co.uk

所以我使用webpack来组合常用库：

'vendor.js': ['vue', 'bootstrap', 'axios', 'popper.js', 'pace', 'vue-router', 'jquery'],

和我的全局配置：

import Popper from 'popper.js/dist/umd/popper.js';
import Pace from 'pace-js';
import Vue from 'vue';
import VueRouter from 'vue-router';
import Axios from 'axios';

Pace.start();

try {
  window.$ = window.jQuery = require('jquery');
  window.Popper = Popper;
  require('bootstrap');
} catch (e) {}

window.Vue = Vue;
window.VueRouter = VueRouter;

window.axios = Axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
  window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
  console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

所以如果我想做 axios post 它工作正常，但每次我必须告诉它它要去哪个域时，是否有某种设置，以便当我在本地主机上时，域是 webuilder.app 而如果它的产品域是 api.webuilder.co.uk？

Answer 1

考虑使用类似的东西

var axios = require('axios');

var axiosInstance = axios.create({
  baseURL: process.env.baseUrl || 'https://example.com/foo/bar'
});

module.exports = axiosInstance;

在将环境设置为 prod 或 development 的条件语句中使用它