So packen Sie Vue-Projekte nach Umgebung

Dieses Mal zeige ich Ihnen, wie Sie Vue-Projekte nach Umgebung packen. Was sind die Vorsichtsmaßnahmen für das Packen von Vue-Projekten nach Umgebung?

Schritt 1: Cross-env installieren

Führen Sie den folgenden Befehl im Projektverzeichnis aus, um Cross-Env zu installieren. Sie können ihn direkt im Terminalfenster in der IDE ausführen. Sie können auch über Windows CMD oder Linux Terminal navigieren folgenden Befehl.

npm i --save-dev cross-env

Schritt 2: Ändern Sie die Parameter in jeder Umgebung

Fügen Sie test.env.js und pre.env.js im Verzeichnis config/ hinzu. Ändern Sie den Inhalt in prod.env.js. Der geänderte Inhalt lautet wie folgt:

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

Studieren und ändern Sie den Inhalt der Dateien test.env.js bzw. pre.env.js. Der geänderte Inhalt lautet wie folgt:

'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"'
}

Ändern Sie den Inhalt der Datei dev.env.js. Der geänderte Inhalt lautet wie folgt. Der Dienst-Proxy wird in der Entwicklungsumgebung konfiguriert und die API vor API_ROOT ist die konfigurierte Proxy-Adresse.

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

Schritt 3: Ändern Sie die Datei package.json des Projekts

Personalisieren Sie den Skriptinhalt in der Datei package.json und fügen Sie mehrere neu definierte Verpackungsprozesse für die Umgebung hinzu. Die darin enthaltenen Parameter stimmen mit den vorherigen Anpassungen überein.

"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"
 },

Hier ist es am besten, NODE_ENV auf Produktion zu setzen, da in utils.js nur eine Beurteilung der Produktion vorgenommen wird und persönliche Tests keinen Einfluss auf die API-Parameter jeder Umgebung haben. ##Schritt 4: Ändern Sie config/index.js

Ändern Sie die Build-Parameter in der Datei config/index.js. Die Parameter hier werden in 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'),

verwendet Schritt 5: Build-Umgebungsparameter in webpackage.prod.conf.js verwenden

Ändern Sie die Datei build/webpackage.prod.conf.js und passen Sie die Generierungsmethode der env-Konstanten an.

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

Schritt 6: build/build.js anpassen

Löschen Sie die Zuweisung von process.env.NODE_ENV und ändern Sie die Definition des Spinners. Der angepasste Inhalt lautet wie folgt:

'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()
//更多的其它内容，不需要做任何调整的内容 ...

Hinzugefügt:

So verpacken Sie vue2+webpack nach Umgebung

Dieses Jahr hatte ich die Gelegenheit, an einem Vue2-Einzelseitenanwendungsprojekt zu arbeiten, und ich habe von der Entwicklung bis zum Start zwei Umgebungen durchlaufen. Ich führe npm run sowohl in der Testumgebung als auch in der offiziellen Umgebung aus. bauen. Die Variablen dieser beiden Umgebungen sind derzeit unterschiedlich. Es ist etwas mühsam, die Variablen beim Packen jedes Mal zu ändern. Später habe ich auf meine Kollegen verwiesen, die je nach Umgebung unterschiedliche Befehle ausgeführt und unterschiedliche Pakete erhalten haben. Beispiel: Testumgebung npm Test ausführen, formale Umgebung npm ausführen, Build ausführen.

  Muss in der Datei config/prod.env.js konfiguriert werden  

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;

npm stellt eine Variable npm_lifecycle_event bereit, die den Namen des aktuell ausgeführten Skripts zurückgibt, z. B. Pretest, Test, Posttest usw. Daher können Sie diese Variable verwenden, um Code für verschiedene NPM-Skriptbefehle in derselben Skriptdatei zu schreiben.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der automatisierten mobilen Build-Rem-Methode von Webpack

Details zur Verwendung von Angular2-Modulen und gemeinsam genutzten Modulen Einführung

Das obige ist der detaillierte Inhalt vonSo packen Sie Vue-Projekte nach Umgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!