Wie sollten Vue-Projekte nach Umgebung verpackt werden?

Dieses Mal zeige ich Ihnen, wie Vue-Projekte nach Umgebung verpackt werden sollten. Was sind die Vorsichtsmaßnahmen für die Verpackung von Vue-Projekten nach Umgebung?

In der Projektentwicklung sind unsere Projekte im Allgemeinen in Entwicklungsversion, Testversion, Vorversion und Prod-Version unterteilt. Die Standardumgebungen von Vue-cli sind nur dev und prod. In der Vergangenheit musste ich jedes Mal, wenn ich eine Testversion oder Vorversion veröffentlichen wollte, die API-Adresse im Quellcode ändern und sie dann verpacken, was sehr mühsam war . Es wäre perfekt, wenn es je nach Umgebung verpackt werden könnte. Ich habe viele Informationen im Internet gesammelt und kann das Programm jetzt entsprechend der Umgebung packen. Lassen Sie uns bleiben und sehen, wie es geht.

Schritt 1: Installierencross-env

Führen Sie den folgenden Befehl im Projektverzeichnis aus, um Cross-env zu installieren , Meine IDE ist Webstorm. Sie muss direkt im Terminalfenster der IDE ausgeführt werden. Es ist auch möglich, das Projektstammverzeichnis über das CMD von Windows oder das Terminal von Linux zu finden und den folgenden Befehl auszuführen.

npm i --save-dev cross-env

Schritt 2: Ändern Sie die Parameter in jeder Umgebung

Test im Verzeichnis config/ hinzufügen. env.js, pre.env.js. Ä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"'
}

Ändern Sie den Inhalt der Dateien test.env.js bzw. pre.env.js 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 ist 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 die hinzu Parameter im Paketierungsprozess mehrerer neu definierter Umgebungen 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 verwendet

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'),

Schritt 5: Verwenden Sie die Build-Umgebungsparameter

in webpackage.prod.conf.js, um build/webpackage.prod.conf.js zu ändern die Datei und passen Sie die Art und Weise an, wie Umgebungskonstanten generiert werden.

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

Ergänzung:

Wie vue2+webpack nach Umgebung verpackt wird

Dieses Jahr hatte ich die Gelegenheit, an einem Vue2-Single-Page-Anwendungsprojekt zu arbeiten. Ich habe zwei Umgebungen von der Entwicklung bis zum Start durchlaufen. Ich führe npm run build sowohl in der Testumgebung als auch in der offiziellen Umgebung aus. 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. Zum Beispiel die Testumgebung NPM Run Test und die formale Umgebung NPM Run Build.

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 npm_lifecycle_event-Variable bereit, um den Namen des aktuell ausgeführten Skripts zurückzugeben, z. B. pretest, test, Nachtest 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:

So verwenden Sie Slots/Scope-Slots in Vue

Detaillierte Erläuterung der Verwendung von Slot-Sockets in Vue-Komponenten

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