Comment utiliser vue+webpack pour créer un projet (avec code)

Cette fois je vais vous montrer comment utiliser vue+webpack pour réaliser un projet (avec du code). Quelles sont les précautions à prendre pour utiliser vue+webpack pour réaliser un projet ? Voici un cas pratique, prenons un exemple. regarder.

Utilisez webpack pour configurer différentes adresses d'interface pour l'environnement de production et l'environnement de publication

Pendant le développement, le front-end et le back-end sont développés simultanément. L'interface fournie par le front-end pour appeler le back-end se trouve également au sein du LAN. Cependant, lorsque le projet sera mis en ligne, l'interface sera obtenue à partir du serveur réel, et les commutations fréquentes entre l'interface de test et l'interface réelle sont très dégoûtantes.

La première étape consiste à définir différentes adresses d'interface dans le fichier de configuration du webpack

Ouvrez le fichier dev.en.js. Modifier comme suit :

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地址
})

Également dans le fichier prod.env.js

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

La deuxième étape consiste à appeler les paramètres définis dans le code

Pour exemple, j'ai du fichier : src/config/api.js

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

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres. articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Cas d'utilisation de l'échafaudage de développement d'applications React

Comment utiliser js pour convertir des images en base64

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!