So verwenden Sie Npm Run Build in Vue, um je nach Umgebung unterschiedliche Parameter zu übergeben

Dieses Mal zeige ich Ihnen, wie Sie Npm Run Build in Vue verwenden, um je nach Umgebung unterschiedliche Parameter zu übergeben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Npm Run Build in Vue, um je nach Umgebung unterschiedliche Parameter zu übergeben? Das Folgende ist ein praktischer Fall.

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. Ändern Sie /config/dev.env.js im Projekt:

Hinzufügen : 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. Projekt Ändern Sie die Stelle im Ajax-Paket:

/**
** 设置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 – it ist ein Balken mit 2 horizontalen Linien, 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, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der zugrunde liegenden Logik von new() in JS

So verwenden Sie die Koa2-Datei hochladen und herunterladen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Npm Run Build in Vue, um je nach Umgebung unterschiedliche Parameter zu übergeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!