Analyse pratique du projet vue+webpack

Cette fois je vais vous apporter une analyse pratique du projet vue+webpack Quelles sont les précautions d'utilisation du projet vue+webpack Ce qui suit est un cas pratique, jetons un coup d'oeil.

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

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 :

Comment lier les touches fléchées pour contrôler le mouvement des div

Analyse des cas d'utilisation des emballages de polices impressionnants (Code ci-joint)

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!