J'ai un HTML et une vue et une vue-router référencées

Maintenant, si je veux utiliser axios, je peux obtenir les données de retour en appelant directement le chemin

Mais j'espère pouvoir configurer des fichiers pour gérer de manière centralisée apiUrl et apiName et les importer

index.html

<html>
<head>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module" src="/api/server.js"></script>
</head>
<body>
    <div id="app">
        <p>
            <router-link to="/contact">Go to contact</router-link>
        </p>
        <p>
            <router-link to="/about">Go to about</router-link>
        </p>
        <p>
            <router-view></router-view>
        </p>
    </div>

    <head>
        <script>
            const contact = httpVueLoader('./view/contact.vue')
            const about = httpVueLoader('./view/about.vue')

            const routes = [
                { path: '/contact', component: contact },
                { path: '/about', component: about }
            ]

            const router = new VueRouter({
                routes
            })

            var app = new Vue({
                router,
            }).$mount('#app')

        </script>


    </head>
</body>
</html>

contact.vue

<template>
  <p>{{ hello }}</p>
</template>


<script>

module.exports = {
  data: function () {
    return {
      hello: "contact",
    };
  },
  mounted() {
    
    axios
      .get('apiUrl/apiName')
      .then(response => (console.log(response.data))
      .catch(function (error) { 
        console.log(error);
      });

    
    
  },
};
</script>
<style>
</style>

Actuellement, les données peuvent être obtenues via des chemins directement définis. Je n'utilise pas Node.js. Est-il possible de modulariser apiUrl?

0
rubie 11 mars 2021 à 09:38

1 réponse

Meilleure réponse

Vous pouvez définir axios par défaut baseURL afin que toutes les demandes partagent la même URL préfixée à leurs chemins:

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com/'

Je ferais cela dans index.html avant de charger tout composant qui ferait des requêtes axios.

0
tony19 11 mars 2021 à 06:57