Explication détaillée des cas d'utilisation de Vue Webpack

Cette fois, je vais vous apporter une explication détaillée des cas d'utilisation de vue webpack. Quelles sont les précautions lors de l'utilisation de vue webpack. Ce qui suit est un cas pratique, jetons un coup d'œil.

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

et à ouvrir 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

Enfin, lorsque

npm exécute dev, l'interface de test est exécutée. Lorsque nous exécutons

npm run build pour empaqueter le projet, ce qui est empaqueté est l'interface officielle du serveur

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. informations passionnantes, veuillez prêter attention aux autres sujets connexes dans l'article du site Web PHP chinois !

Lecture recommandée :

react coopère avec les composants antd pour créer un système backend

Vue+beforeEnter utilise la fonction hook

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!