Maison > Article > interface Web > Comment regrouper différents noms de domaine avec Npm run build
Cette fois, je vais vous montrer comment empaqueter différents noms de domaine avec Npm run build. Quelles sont les précautions pour empaqueter différents noms de domaine avec Npm run build. Voici un cas pratique, jetons un coup d'oeil. .
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.comEnvironnement 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. Modification de /config/dev.env.js dans le projet :
Ajout : 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 transmis dans :'use strict' let HOST = process.argv.splice(2)[0] || 'prod'; console.log(HOST); module.exports = { NODE_ENV: '"production"', HOST: '"'+HOST+'"' }
3. dans le projet Modifier l'encapsulation :
/** ** 设置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. Tapez enfin la commande :
npm run build -- test
apiUrl = 'http://api-test.demo.com'Si la production en ligne est publiée et packagée,
npm run build -- prod
apiUrl = 'http://api.demo.com'J'y crois Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois ! Lecture recommandée :
Koa2 fait fonctionner la fonction de téléchargement et de téléchargement de fichiers
Quelles fonctions new() dans JS implémente
Utilisez jQuery pour prévisualiser localement lors du téléchargement d'images
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!