Maison > interface Web > js tutoriel > le corps du texte

Npm run build in vue regroupe différents noms de domaine en fonction de la méthode de passage des paramètres de l'environnement

亚连
Libérer: 2018-05-28 14:58:07
original
3665 Les gens l'ont consulté

Cet article présente principalement la méthode Npm run build dans le projet vue pour empaqueter différents noms de domaine en fonction de l'environnement. Utilisez npm run build --xxx pour déterminer différents environnements en fonction des paramètres transmis xxx et donner différentes configurations de noms de domaine. Veuillez vous référer à cet article pour plus de détails.

Lors du développement du projet, le front-end est très perturbé lors de la configuration du nom de domaine de l'API back-end. Il apparaît souvent :

Environnement de développement local : api. -dev.demo.com

Environnement de test : api-test.demo.com

Environnement de production en ligne : api.demo.com,

Cette fois, il est packagé dans le projet Vue.js pour vous apprendre Une méthode :

Utilisez npm run build -- xxx   pour déterminer différents environnements et donner différentes configurations de noms de domaine en fonction du paramètre xxx transmis.

1. Modification de /config/dev.env.js dans le projet :

Ajout : HOST : '"dev"'

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 HOST: '"dev"'
})
Copier après la connexion

2. Modifiez /config/prod.env.js dans le projet :

Récupérez les paramètres transmis dans :

'use strict'
let HOST = process.argv.splice(2)[0] || 'prod';
console.log(HOST);
module.exports = {
 NODE_ENV: '"production"',
 HOST: '"'+HOST+'"'
}
Copier après la connexion

3. dans le projet Modifier l'encapsulation :

/**
** 设置API接口域名
**/
let apiUrl = '';
// 根据 process.env.HOST 的值判断当前是什么环境
// 命令:npm run build -- test ,process.env.HOST就设置为:'test'
let HOST = process.env.HOST;
HOST = HOST === 'prod' ? '' : '-' + HOST;
apiUrl = 'http://api'+HOST+'.demo.com';
axios.defaults.baseURL = apiUrl;
Copier après la connexion

4. Tapez enfin la commande :

npm run build -- test

Remarque – it est une barre de 2 lignes horizontales, suivie de paramètres, de sorte que process.env.HOST obtienne le paramètre 'test',

apiUrl = 'http://api-test.demo.com'
Copier après la connexion

Si la production en ligne est publiée et emballée, npm run build -- prod

apiUrl = 'http://api.demo.com'
Copier après la connexion

ci-dessus, je l'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Créez vous-même le téléchargement d'images ajax

Comment utiliser les actions ajax avec différents espaces de noms

Solution pour ajouter automatiquement une balise pré à la valeur de retour ajax

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!