Cet article présente principalement la méthode Npm run build dans le projet vue pour empaqueter différents noms de domaine en fonction de l'environnement. Utilisez npm run build --xxx pour déterminer différents environnements en fonction des paramètres transmis xxx et donner différentes configurations de noms de domaine. Veuillez vous référer à cet article pour plus de détails.
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 pour vous apprendre Une méthode :
Utilisez npm run build -- xxx
pour déterminer différents environnements et donner différentes configurations de noms de domaine en fonction du paramètre xxx transmis.
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
Remarque – it est une barre de 2 lignes horizontales, suivie de paramètres, de sorte que process.env.HOST obtienne 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'
ci-dessus, je l'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.
Articles connexes :
Créez vous-même le téléchargement d'images ajax
Comment utiliser les actions ajax avec différents espaces de noms
Solution pour ajouter automatiquement une balise pré à la valeur de retour ajax
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!