Comment utiliser Npm run build in vue pour transmettre différents paramètres en fonction de l'environnement

Cette fois, je vais vous montrer comment utiliser Npm run build in vue pour transmettre différents paramètres en fonction de l'environnement. Quelles sont les précautions concernant l'utilisation de Npm run build in vue pour transmettre différents paramètres en fonction de l'environnement. environnement. Ce qui suit est un cas pratique.

Lors du développement du projet, le front-end est très perturbé lors de la configuration du nom de domaine de l'API back-end Il apparaît souvent :

Environnement de développement local : api-dev.demo.com

Environnement de test : api-test.demo.com

Environnement de production en ligne : api.demo.com,

Cette fois, il est packagé dans le projet Vue.js, apprenez-vous comment faire :

Utilisez

pour déterminer différents environnements et donner différentes configurations de noms de domaine en fonction du paramètre xxx transmis. npm run build -- xxx  

1. Modifiez /config/dev.env.js dans le projet :

Ajoutez  : HOST : '"dev"'

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 HOST: '"dev"'
})

2. Modifiez /config/prod.env.js dans le projet :

Récupérez les paramètres passés dans :

'use strict'
let HOST = process.argv.splice(2)[0] || 'prod';
console.log(HOST);
module.exports = {
 NODE_ENV: '"production"',
 HOST: '"'+HOST+'"'
}

3. Modifier le package ajax dans le projet :

/**
** 设置API接口域名
**/
let apiUrl = '';
// 根据 process.env.HOST 的值判断当前是什么环境
// 命令：npm run build -- test ，process.env.HOST就设置为：'test'
let HOST = process.env.HOST;
HOST = HOST === 'prod' ? '' : '-' + HOST;
apiUrl = 'http://api'+HOST+'.demo.com';
axios.defaults.baseURL = apiUrl;

4. Commande finale :

npm run build -- test

Remarque : il y a deux barres horizontales, suivies de paramètres, donc process.env.HOST obtiendra le paramètre "test",

apiUrl = 'http://api-test.demo.com'

Si la production en ligne est publiée et emballée,

npm run build -- prod

apiUrl = 'http://api.demo.com'

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de la logique sous-jacente de new() dans JS

Comment utiliser le fichier Koa2 télécharger et télécharger

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!