Praktische Analyse des Vue+Webpack-Projekts

Dieses Mal werde ich Ihnen eine praktische Analyse des vue+webpack-Projekts geben. Was sind die Vorsichtsmaßnahmen für die Verwendung des vue+webpack-Projekts? Das Folgende ist ein praktischer Fall, 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 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.

Öffnen Sie die Datei dev.en.js. Ä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:

So binden Sie Pfeiltasten, um die Div-Bewegung zu steuern

Font-geniale Anwendungsfallanalyse für die Schriftartenverpackung (Code beigefügt)

Das obige ist der detaillierte Inhalt vonPraktische Analyse des Vue+Webpack-Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!