So verwenden Sie das Vue-Webpack

Dieses Mal zeige ich Ihnen, wie Sie Vue Webpack verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Vue Webpack gelten. Hier sind praktische Fälle, schauen wir uns das an.

Während der Entwicklung werden Front-End und Backend gleichzeitig entwickelt. Die vom Frontend bereitgestellte Schnittstelle zum Aufrufen des Backends befindet sich ebenfalls im LAN. Wenn das Projekt jedoch online gestellt 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'

rrree

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

Empfohlene Lektüre:

Wie Vue die beforeEnter-Hook-Funktion implementiert

Zusammenfassung der JS-Image-zu-Base64-Methode

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Vue-Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!