Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Anwendungsfälle von Vue Webpack
Detaillierte Erläuterung der Anwendungsfälle von Vue Webpack
- php中世界最好的语言Original
- 2018-04-27 10:05:471555Durchsuche
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!