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

也许您可以使用.env文件，并在vue或商店（vuex）中使用globaly var对其进行调用，例如API_URL：process.env.API_URL和this。$ store.state.API_URL（或getter）< / p>

选中this

您还可以创建axios实例并使用它

选中this

致谢！

Answer 2

您可以在axios对象本身中设置基本URL。它应该类似于：

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

Answer 3

我最终如下修改了 src / plugins / axios.js -

_signInAsync = async() => {

    if(this.state.email !== '' && this.state.password!== ''){

      fetch('http://192.168.2.60:4563/login', {
        method: 'POST',
        headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: this.state.email,
          password: this.state.password,
        }),
      })
      .then((response) => {
        if(response.ok){

          console.log(this.state.email);
          this.props.navigation.navigate('Main');
        }
      })
    }
  };

由于Axios支持相对路径，因此import axios from 'axios'; const instance = axios.create({ baseURL: 'myapp/api/' }); export default { install: function(Vue) { Object.defineProperty(Vue.prototype, '$axios', { value: instance }); } }已从baseURL字符串中删除。

然后在https://localhost/方法 src / forms / official-scenarios.vue 中的用法变成这样-

getOfficialScenarios()

在Axios插件中为Vue全局定义基本URL

3 个答案: