Comment les projets Vue doivent-ils être empaquetés par environnement ?

Cette fois, je vais vous montrer comment les projets Vue doivent être empaquetés par environnement. Quelles sont les précautions pour empaqueter les projets Vue par environnement. Voici des cas pratiques, jetons un coup d'oeil.

Dans le développement de projets, nos projets sont généralement divisés en version de développement, version de test, version pré et version Prod. Les environnements par défaut de Vue-cli sont uniquement dev et prod. Dans le passé, chaque fois que je voulais publier une version de test ou une version Pre, je devais modifier l'adresse API dans le code source puis la packager, ce qui était très gênant. . Ce serait parfait s'il pouvait être conditionné en fonction de différents environnements. J'ai collecté beaucoup d'informations sur Internet, et maintenant je peux packager le programme en fonction de l'environnement. Quant à savoir comment le faire, restons et voyons.

Étape 1 : Installercross-env

Exécutez la commande suivante dans le répertoire du projet pour installer cross-env , Mon IDE est webstorm. Il doit être exécuté directement dans la fenêtre Terminal de l'IDE. Il est également possible de localiser le répertoire racine du projet via le CMD de Windows ou le Terminal de Linux et d'exécuter la commande suivante.

npm i --save-dev cross-env

Étape 2 : Modifier les paramètres dans chaque environnement

Ajouter un test dans le répertoire config/ . env.js, pré.env.js. Modifiez le contenu dans prod.env.js. Le contenu modifié est le suivant :

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 EVN_CONFIG:'"prod"',
 API_ROOT:'"/apis/v1"'
}

Modifiez le contenu des fichiers test.env.js et pre.env.js respectivement. suit :

'use strict'
module.exports = {
 NODE_ENV: '"testing"',
 EVN_CONFIG:'"test"',
 API_ROOT:'"/test/apis/train"'
}
'use strict'
module.exports = {
 NODE_ENV: '"presentation"',
 EVN_CONFIG:'"pre"',
 API_ROOT:'"/pre/apis/train"'
}

Modifiez le contenu du fichier dev.env.js Le contenu modifié est le suivant. Le proxy de service est configuré dans l'environnement de développement et l'API avant API_ROOT est l'adresse du proxy configurée.

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 VN_CONFIG: '"dev"',
 API_ROOT: '"api/apis/v1"'
})

Étape 3 : Modifier le fichier package.json du projet

Personnalisez le contenu des scripts dans le fichier package.json et ajoutez le Les paramètres du processus de conditionnement de plusieurs environnements nouvellement définis sont cohérents avec les ajustements précédents.

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
  "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
 },

Ici, il est préférable de définir NODE_ENV sur production, car un seul jugement de production est effectué dans utils.js, et les tests personnels n'affecteront pas les paramètres API de chaque environnement. ##Étape 4 : Modifier config/index.js

Modifier les paramètres de build dans le fichier config/index.js Les paramètres ici seront utilisés dans build/webpackage.prod.conf.js

build:{
  // Template for index.html
  // 添加test pre prod 三处环境的配制
  prodEnv: require('./prod.env'),
  preEnv: require('./pre.env'),
  testEnv: require('./test.env'),
  //下面为原本的内容，不需要做任何个性
  index:path.resolve(dirname,'../dist/index.html'),

Étape 5 : Utilisez les paramètres de l'environnement de construction

// 个性env常量的定义
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']

Étape 6 : Ajuster build/build.js

'use strict'
require('./check-versions')()
// 注释掉的代码
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// 修改spinner的定义
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
//更多的其它内容，不需要做任何调整的内容 ...

Supplémentaire :

Comment vue2+webpack est empaqueté par environnement

const target = process.env.npm_lifecycle_event;
　　if (target == 'test') {
　　//测试
　　var obj = {
　　NODE_ENV: '"production"',
　　//post用当前域名
　　API_ROOT: '""',
　　//数据字典
　　API_ROOT_DICT:'"http://test.gw.fdc.com.cn"',
　　}
}else {
　　//线上
　　var obj = {
　　NODE_ENV: '"production"',
　　//post用当前域名
　　API_ROOT: '""',
　　//数据字典
　　API_ROOT_DICT:'"http://gw.fdc.com.cn"',
　　}
}
module.exports = obj;

Comment utiliser les slots/slots scoped dans Vue

Explication détaillée de l'utilisation des sockets de slot dans les composants Vue

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!