NPM führt Build in Vue aus und verpackt unterschiedliche Domänennamen entsprechend der Methode zur Übergabe von Parametern in der Umgebung

In diesem Artikel wird hauptsächlich die Npm run build-Methode im Vue-Projekt vorgestellt, um je nach Umgebung unterschiedliche Domänennamen zu packen. Verwenden Sie npm run build --xxx, um unterschiedliche Umgebungen anhand der übergebenen Parameter xxx zu bestimmen und unterschiedliche Domänennamenkonfigurationen anzugeben. Weitere Informationen finden Sie in diesem Artikel.

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,

Diesmal ist es verpackt Das Vue.js-Projekt zeigt Ihnen eine Methode:

Verwenden Sie npm run build -- xxx   , um unterschiedliche 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 wird, npm run build -- prod

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

Das Obige ist was Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft veröffentlicht wird.

Verwandte Artikel:

Ajax-Bild-Upload selbst erstellen

So verwenden Sie Ajax-Aktionen mit verschiedenen Namespaces

Lösung zum automatischen Hinzufügen eines Pre-Tags zum Ajax-Rückgabewert

Das obige ist der detaillierte Inhalt vonNPM führt Build in Vue aus und verpackt unterschiedliche Domänennamen entsprechend der Methode zur Übergabe von Parametern in der Umgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!