CROSS-ENV異なる環境構成
3547 ワード
プロジェクトの背景
h 5環境構築のニーズに適応するために、動的配置開発、テスト、生産の3種類の対応ドメイン名とパッケージコマンドが必要である.cross-envを使用すると、構成環境をより明確にし、管理することができます.
概要
cross-envの役割は、グローバル構成NODEを必要としないことです.ENV scriptsスクリプトでNODEを変更するEnVの値は、異なる環境でproccess.env.NODE_を実現します.ENVによって、configの動作原理はNODEに基づいています.ENVという値なので、両者を組み合わせて使うのがおすすめです.
cross-envのインストール
configのパラメータを変更します.以下は環境の構成情報です.NODEに注意してください.ENVの構成名はパッケージコマンドと一致しています.
config/index.jsの変更(prodEnv、testEnvの追加に注意)
Webpackage.prod.conf.jsで構築環境パラメータを構成する
異なる環境apiを構成し、一致NODE_に基づいてENVの異なる値
npm run dev、npm run build--qa、npm run build--prodをそれぞれ実行すると、所望の結果が得られます.
h 5環境構築のニーズに適応するために、動的配置開発、テスト、生産の3種類の対応ドメイン名とパッケージコマンドが必要である.cross-envを使用すると、構成環境をより明確にし、管理することができます.
概要
cross-envの役割は、グローバル構成NODEを必要としないことです.ENV scriptsスクリプトでNODEを変更するEnVの値は、異なる環境でproccess.env.NODE_を実現します.ENVによって、configの動作原理はNODEに基づいています.ENVという値なので、両者を組み合わせて使うのがおすすめです.
cross-envのインストール
npm install --save-dev cross-env
使用npm run dev
パッケージは開発環境npm run build--qa
パッケージはテスト環境npm run build--prod
パッケージは生成環境です"dev":"cross-env NODE-ENV=development node build/webpack.deb.conf.js"
"build --qa":"cross-env NODE_ENV=testing node build/build.js"
"build --prod":"cross-env NODE_ENV=production node build/build.js"
configのパラメータを変更します.以下は環境の構成情報です.NODEに注意してください.ENVの構成名はパッケージコマンドと一致しています.
//dev
module.exports = {
NODE_ENV: '"development"',
BASE_API: 'http://10.250.115.99/statistics' //
}
//
module.exports = {
NODE_ENV: '"testing"',
BASE_API: 'http://10.250.115.99/statistics' //
}
//
module.exports = {
NODE_ENV: '"production"',
BASE_API: 'http://ai.iteldrive.com/statistics' //
}
config/index.jsの変更(prodEnv、testEnvの追加に注意)
'use strict'
const path = require('path')
module.exports = {
build: {
prodEnv: require('./prod.env'),
testEnv: require('./test.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
}
Webpackage.prod.conf.jsで構築環境パラメータを構成する
const env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: require('../config/prod.env')
build/build.jsの調整var spinner = ora('building for ' + process.env.NODE_ENV + '...')
spinner.start()
以上の手順で構成が完了したら、npm run build--qaを再起動すると、テスト環境を実行するコードがパッケージ化されて生成されていることがわかります(distディレクトリ)、問題は環境が整っていることです.どのように環境を使わないapiを構成しますか?異なる環境apiを構成し、一致NODE_に基づいてENVの異なる値
let API_URL
if (process.env.NODE_ENV === 'development') {
API_URL = 'http://10.250.115.99/statistics'
} else if (process.env.NODE_ENV === 'production') { //
API_URL = 'http://ai.iteldrive.com/statistics'
} else if (process.env.NODE_ENV === 'testing') {
API_URL = 'http://10.250.115.99/statistics'
} else {
API_URL = 'http://ai.iteldrive.com/statistics'
}
//console.log(API_URL + ' api************')
const http = axios.create({
baseURL: API_URL, // api base_url,
timeout: 1000 * 30,
withCredentials: true,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
npm run dev、npm run build--qa、npm run build--prodをそれぞれ実行すると、所望の結果が得られます.