Alors que les environnements de développement et de production doivent être presque interchangeables, écrire du code spécifique au développement ou définir des variables spécifiques au développement est parfois nécessaire. Cela est particulièrement vrai lorsque vous travaillez avec des API. Lorsque vous créez votre code, vous pouvez avoir une URL d’API locale pour le développement et une URL d’API de production. Dans ce cas, vous devrez vérifier l’état de votre application Vue. Voici comment vérifier si Vue est en mode développement.

Comment vérifier si Vue est en mode développement ? (La solution)

Pour vérifier si vue est en mode développement, vous pouvez utiliser le process.env.NODE_ENV variable.

Examinons un exemple de code simple qui définit une variable lorsqu’un composant est monté selon que vous êtes ou non en mode développement ou production. 

//App.vue
export default {
    name: 'App',
    mounted() {
        console.log(process.env.NODE_ENV)
        let appState = process.env.NODE_ENV === 'development' ? 'Im in Development Mode' : 'Im in Production Mode'
    },
}

Pendant que vous exécutez votre serveur de développement à l’aide de npm run servela valeur NODE_ENV sera par défaut development. Toutefois, lorsque vous créez votre application à l’aide de npm run build webpack changera la variable NODE_ENV en production.

Il est recommandé de définir des variables spécifiques à l’environnement dans le vue.config.js dossier.

Comment définir une API de développement dans VUE ?

Un cas d’utilisation courant pour vérifier si Vue est en mode développement consiste à définir une origine d’API localhost spécifique pendant le développement et une origine d’API officielle lorsque le code est compilé pour la production. Un bon endroit pour le faire est dans votre fichier `vue.config.js. Prenons un exemple.

//vue.config.js

process.env.VUE_APP_API = process.env.NODE_ENV === 'localhost'
  ? 'https://localhost:8000'  : 'https://api.officialapi.com'

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

Cet extrait crée une autre variable de processus que nous pouvons utiliser sans notre code. Nous pouvons appeler la variable comme ceci.

//App.vue

import axios from 'axios'

export default {
    name: 'App',
    mounted() {
        let response = axios.get(process.VUE_APP_API + 'somePath')
    },
}

Il est important de s’assurer que votre logique de développement et de production est correctement segmentée dans votre code. Il est recommandé de rendre vos deux environnements aussi proches et interchangeables que possible. Si vous vous retrouvez à revenir à votre code de développement et à le modifier pour tester la logique de production, vous devrez probablement définir des conditions appropriées plus haut dans la hiérarchie de votre code.

Nous espérons que vous avez trouvé ce guide utile et qu’il améliore votre flux de développement. Consultez d’autres guides Vue et Javascript dans notre section de codage Javascript.

Categorized in:

Guide,