web-dev-qa-db-fra.com

Comment définir le chemin de l'API dans vue.config.js pour la production?

J'utilise vue cli3 pour la configuration. J'ai déjà l'api devServer configuré comme tel dans vue.config.js fichier:

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:1888/apps/test/mainapp.php/',
            changeOrigin: true,
        },
    },
}

J'ai également besoin de définir le chemin ' https: //server/myapp/main.php/ ' comme chemin de l'API de production, mais je n'arrive pas à trouver d'informations dans la documentation sur la façon de le faire. Toute aide est appréciée.

Bref exemple de ce que je fais dans le code:

methods: {
    login() {
        this.axios.post('/api/test')
            .then((resp) => {
                console.log(resp);
            })
            .catch(() => {
                console.log('err:' , err);
            });
    },
},
webpackvue.jsvue-cli
6
ierdna

Votre devServer ne s'exécute pas lorsque vous exécutez yarn/npm run build. Vous êtes uniquement fourni avec le javascript transpilé pour être servi. Vous devrez modifier votre URL dans vos fichiers .env.

Développement:

.env

VUE_APP_API_ENDPOINT = '/api'

Production:

.env.production

VUE_APP_API_ENDPOINT ='https://server/myapp/main.php'

Ensuite, votre bibliothèque de demandes XHR devrait utiliser ces variables d'environnement lors de la demande, comme avec axios:

axios[method](process.env.VUE_APP_API_ENDPOINT, data)

Où method serait GET/POST/PUT/DELETE.

Veuillez noter que vous serez limité aux règles mises en place par Cross-Origin-Resource-Sharing. Si votre serveur n'autorise pas l'URL desservant vos pages Vue.js, vous devrez l'ouvrir.

Vous n'avez pas besoin de modifier votre configuration devServer car votre .env déclarera désormais les demandes xhr envoyées à /api qui sera toujours proxy pour vous.

4
Ohgodwhy

Vous utilisez axios dans votre code, vous pouvez donc essayer:

// service.js
import axios from 'axios';
axios.defaults.baseURL = 'https://server/myapp/main.php/';
export default axios;

// main.js
Vue.prototype.$axios = axios;

// In your component
login() {
    this.$axios.post('/api/test', data)
        .then((resp) => {
            console.log(resp);
        })
        .catch(() => {
            console.log('err:' , err);
        });
}

Ensuite, chaque demande serait envoyée avec la valeur par défaut baseUrl que vous avez définie.

Découvrez plus d'options pour axios

1
billychan