L'environnement Vue transmet des paramètres pour regrouper différentes analyses de code de nom de domaine

Cette fois, je vais vous apporter une analyse des codes pour empaqueter différents noms de domaine lors du passage de paramètres dans l'environnement vue. Quelles sont les précautions pour empaqueter différents noms de domaine lors du passage de paramètres dans l'environnement vue. Ce qui suit est un cas pratique, jetons-y un œil.

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, Laissez-moi 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 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 chinois de PHP !

Lecture recommandée :

Vue2 Implémentation de l'analyse de cas de sélection de panier et d'adresse

Vue Implémentation de Select All et Inverse Cas de fonction de sélection Explication détaillée

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!