Wählen Sie je nach Methode zur Übergabe der Umgebungsparameter unterschiedliche Domänennamen aus

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Auswahl verschiedener Domänennamen basierend auf der Methode zur Übergabe von Umgebungsparametern und die Auswahl verschiedener Domänennamen basierend auf der Methode zur Übergabe von Umgebungsparametern vorstellen. Hier sind praktische Fälle Schauen Sie mal rein.

Während der Projektentwicklung ist das Front-End bei der Konfiguration des Back-End-API-Domänennamens sehr problematisch. Es erscheint häufig:

Lokale Entwicklungsumgebung: api-dev.demo.com

Testumgebung: api-test.demo.com

Online-Produktionsumgebung: api.demo.com,

Dieses Mal ist es im Vue.js-Projekt verpackt, lehren Sie es So geht's:

Verwenden Sie npm run build -- xxx   , um verschiedene Umgebungen zu bestimmen und unterschiedliche Domänennamenkonfigurationen entsprechend dem übergebenen Parameter xxx anzugeben.

1. Änderung von /config/dev.env.js im Projekt:

Hinzugefügt: HOST: „dev“

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

2. Ändern Sie /config/prod.env.js im Projekt:

Rufen Sie die übergebenen Parameter ab:

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

3 im Projekt Ändern Sie die Kapselung:

/**
** 设置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. Letzter Befehl:

npm run build -- test

Hinweis – es ist 2 horizontale Linienleiste, gefolgt von Parametern, sodass Process.env.HOST den Parameter „test“ erhält,

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

Wenn das Online-Produkt veröffentlicht und verpackt wird, npm run build -- prod

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

Ich glaube es Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Strings mit HTML-Feldern in HTML-Tags konvertieren

js implementiert Front-End und Back-End Übertragung von Json

Das obige ist der detaillierte Inhalt vonWählen Sie je nach Methode zur Übergabe der Umgebungsparameter unterschiedliche Domänennamen aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!