vue中引入axios，axios的配置应该写在哪个页面中？

Question

const instance = axios.create();
instance.defaults.timeout = 2500;
instance.get('/longRequest', {
  timeout: 5000
});

如果写在main.js中怎样保证全局可用？
main.js中文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Answer 1

向Vue的原型链注入axios或其实例，这样每个vue的实例都可以访问

main.js中：

Vue.prototype.$http = axios

vue组件中调用

this.$http.get('/api', {})

Answer 2

想正规一些的话就开发一个axios的插件

const axiosPlugin = {
    createHttp() {
        const $http = axios.create();
        $http.defaults.timeout = 2500;
        
        // 省略部分代码...
        
        return $http;
    }
    install(Vue) {
        Vue.prototype.$http = this.createHttp();
    }
};

export default axiosPlugin;

接着在main.js中安装插件

import Vue from "vue";
import axiosPlugin from "axiosPlugin";

Vue.use(axiosPlugin);

在组件中使用

this.$http.get('/longRequest', {
  timeout: 5000
});

Answer 3

可以直接把create好的instance export出来

Answer 4

在页面单独写一个axios请求拦截器，里面可以做全局参数过滤，参数加密解密等各种操作，export出去，
把所有的api按功能或者页面放在一个单独的api文件夹下，在里面引入axios，然后页面之间调这个api文件夹下面的api，比如

import request from '@/common/js/request'

// 编辑
export function updateApi (data) {
  return request({
    url: '/api/area/update',
    method: 'put',
    data
  })
}