javascript - 在 Vue 的 Axios 插件中全局定义基本 URL

Question

在我的 Vue.js 项目中，我使用 here 中的说明为 Axios 创建了一个插件。以便 Axios 将在项目中全局可用。我项目中的相关代码如下所示:

在 src/plugins/axios.js -

import axios from 'axios';

export default {
  install: function(Vue) {
    Object.defineProperty(Vue.prototype, '$axios', { value: axios });
  }
}

在 src/main.js -

import axios from './plugins/axios';
Vue.use(axios);

new Vue({
  render: h => h(App),
  created() {
    console.log(this.$axios ? 'axios plugin works' : 'axios plugin does not work');
  }
}).$mount('#app');

控制台正在输出 axios plugin works所以到目前为止一切都很好。

在使用 Axios 的文件中，有几个硬编码的 URL。下面显示的只是文件中方法的一个示例:
src/forms/official-scenarios.vue -

export default {
    data() {
        return {
                errors: [],
                officialScenarios: []                
        }
    },
    methods: {
        getOfficialScenarios() {
            this.$axios
            .get('https://localhost/myapp/api/scenariolog')
            .then(response => {
                this.officialScenarios = response.data;
            })
            .catch(error => {
                this.errors.push(error);
            });
        }
    },
    mounted: function () {
        this.getOfficialScenarios(); 
    },
}

我想做的是为 https://localhost/myapp/api 全局定义一个基本 URL。并在使用 this.$axios 的每个方法中引用它.那怎么定义？那么 official-scenarios.vue 中的用法是什么样的？ ?

Answer 1

您可以在 axios 对象本身中设置基本 URL。它应该看起来像:

// Set base URL
axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';