Detaillierte Erläuterung, wie Vue verschiedene Domänennamen entsprechend den Übergabeparametern der Umgebung verpackt

Dieses Mal werde ich Ihnen ausführlich erklären, wie Vue verschiedene Domänennamen basierend auf den Übergabeparametern der Umgebung verpackt. Welche Vorsichtsmaßnahmen gibt es für die Verpackung verschiedener Domänennamen durch Vue auf der Grundlage der Übergabeparameter der Umgebung? Hier sind praktische Fälle, werfen wir einen Blick darauf.

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 basierend auf 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. Ändern Sie die Ajax-Kapselung in das Projekt:

/**
** 设置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. Geben Sie abschließend den Befehl ein:

npm run build -- test

Hinweis – es folgen zwei horizontale Balken nach Parametern. Auf diese Weise erhält Process.env.HOST den Parameter „test“

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

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

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

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

Empfohlene Lektüre:

vue führt vollständige Auswahl- und Umkehrauswahlfunktionen aus

vue.js Element-UI-Baum Baumform So ändern Sie iview

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung, wie Vue verschiedene Domänennamen entsprechend den Übergabeparametern der Umgebung verpackt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!