フロントエンドプロジェクト区分環境パッケージ
5236 ワード
一、cross-envのインストール
cnpm install --save-dev cross-env
cross-envというプラグインにより、プラットフォームにまたがって環境変数を設定することができます.では、生産環境、予備生産環境、テスト環境をどのように区別しますか.
二、各環境のパラメータを配置する
ここでvueプロジェクトの手足バージョンは2.0 config/フォルダでpreを1つずつ追加します.env.js\prod.env.js\test.env.js 3つのjsファイルは、環境を区別する根拠として
ここでconfig/dev.envを変更できます.jsはローカル環境アドレスを区別する
三、packageを修正する.jsonファイル
新規パッケージコマンド
四、config/indexを修正する.jsファイル
五、build/webpackageを修正する.prod.conf.js env定数生成の調整方法
六、build/buildを修正する.js
次に、npm run build:test(パッケージテストアドレス)npm run build:pre(パッケージプリプロダクション環境アドレス)npm run build:prod(パッケージプロダクション環境アドレス)を使用します.
転載先:https://juejin.im/post/5cc45a23f265da03a33c3ed0
cnpm install --save-dev cross-env
cross-envというプラグインにより、プラットフォームにまたがって環境変数を設定することができます.では、生産環境、予備生産環境、テスト環境をどのように区別しますか.
二、各環境のパラメータを配置する
ここでvueプロジェクトの手足バージョンは2.0 config/フォルダでpreを1つずつ追加します.env.js\prod.env.js\test.env.js 3つのjsファイルは、環境を区別する根拠として
//config/pre.env.js
'use strict'
module.exports = {
NODE_ENV: '"prepare"',
ENV_CONFIG:'"pre"',
//
API:'"//pre/api"'
}
//config/prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG:'"prod"',
API:'"//prod/api"'
}
'use strict'
//config/test.env.js
module.exports = {
NODE_ENV: '"test"',
ENV_CONFIG:'"test"',
API:'"//test/api"'
}
ここでconfig/dev.envを変更できます.jsはローカル環境アドレスを区別する
'use strict'
//config/dev.env.js
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API:'"//dev/api"'
})
三、packageを修正する.jsonファイル
新規パッケージコマンド
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
"build:test": "cross-env NODE_ENV=test env_config=test node build/build.js",
"build:pre": "cross-env NODE_ENV=prepare env_config=pre node build/build.js"
},
四、config/indexを修正する.jsファイル
build: {
// build prod\test\pre
prodEnv:require('./prod.env.js'),
preEnv:require('./pre.env.js'),
testEnv:require('./test.env.js'),
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
五、build/webpackageを修正する.prod.conf.js env定数生成の調整方法
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']
六、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')
//
//const spinner = ora('building for production...')
const spinner =ora('building for '+process.env.NODE_ENV+' of '+process.env.env_config+' mode ...')
spinner.start()
次に、npm run build:test(パッケージテストアドレス)npm run build:pre(パッケージプリプロダクション環境アドレス)npm run build:prod(パッケージプロダクション環境アドレス)を使用します.
転載先:https://juejin.im/post/5cc45a23f265da03a33c3ed0