Detaillierte Erläuterung der Anwendungsfälle von Vue Webpack

Dieses Mal werde ich Ihnen die Anwendungsfälle von Vue Webpack ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vue Webpack?

Verwenden Sie Webpack, um verschiedene Schnittstellenadressen für die Produktionsumgebung und die Release-Umgebung zu konfigurieren

Während der Entwicklung werden Front-End und Back-End gleichzeitig entwickelt. Die vom Frontend bereitgestellte Schnittstelle zum Aufrufen des Backends befindet sich ebenfalls im LAN. Wenn das Projekt jedoch online geschoben wird, wird die Schnittstelle vom realen Server bezogen, und ein häufiger Wechsel zwischen der Testschnittstelle und der realen Schnittstelle ist sehr ekelhaft.

Der erste Schritt besteht darin, verschiedene Schnittstellenadressen in der Webpack-Konfigurationsdatei

festzulegen und die Datei dev.en.js zu öffnen. Ändern Sie es wie folgt:

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_ROOT: '"//192.168.1.8/api"' // 添加api地址
})

Auch in der Datei prod.env.js

module.exports = {
 NODE_ENV: '"production"',
 API_ROOT: '"//www.baidu.com/api"'
}

Der zweite Schritt besteht darin, die eingestellten Parameter im Code aufzurufen

Zum Beispiel meines: src/config/api.js-Datei

// 原来的API接口地址
var root = 'https://cnodejs.org/api/v1'

// 新配置的API接口地址
var root = process.env.API_ROOT

Schließlich

npm run dev, die Testschnittstelle wird ausgeführt. Wenn wir

npm run build ausführen, um das Projekt zu packen, wird die offizielle Schnittstelle des Servers gepackt.

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Spannende Informationen, bitte beachten Sie andere verwandte Themen im Artikel über die chinesische PHP-Website!

Empfohlene Lektüre:

react arbeitet mit antd-Komponenten zusammen, um ein Backend-System zu erstellen

Vue+beforeEnter verwendet Hook-Funktion

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsfälle von Vue Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!