Comment utiliser Vue Webpack

Cette fois, je vais vous montrer comment utiliser vue webpack et quelles sont les précautions lors de l'utilisation de vue webpack. Voici des cas pratiques, jetons un 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

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, je de : 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 :

Comment Vue implémente la fonction de hook beforeEnter

Résumé de la méthode image JS 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!