So verwenden Sie Vue + Webpack, um ein Projekt zu erstellen (mit Code)

Dieses Mal zeige ich Ihnen, wie Sie mit vue+webpack ein Projekt erstellen (mit Code). Was sind die Vorsichtsmaßnahmen für die Verwendung von vue+webpack zum Erstellen eines Projekts? sehen.

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 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.

Ö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'

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:

React Application Development Scaffolding Use Case

So verwenden Sie js, um Bilder in base64 zu konvertieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue + Webpack, um ein Projekt zu erstellen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!