NodeJs/Vue項目中對process.env的使用

NODE_ENV獲取環(huán)境變量

let env = app.get('env')
let env = process.env.NODE_ENV
//默認 NODE_ENV 為環(huán)境變量名稱
//可自行在 process.env 對象下定義需要使用的變量,在項目中可以根據(jù)
//不同的 env 值設(shè)置 defaultUrl 或者其他值

在webpack 打包的項目/Node JS項目中,可以安裝 cross-env(跨Win/Linux平臺設(shè)置 process.env值) 插件缸逃,在 package.json 文件中
設(shè)置不同的運行腳本垃它,比如:

script:{
    "start": "node build/dev-server.js",
    "buildStag": "cross-env cross-env NODE_ENV=stag  node build/dev-server.js",
    "buildProd": "cross-env cross-env NODE_ENV=production  node build/dev-server.js",
}
//根據(jù)上述腳本即可設(shè)置不同的 NODE_ENV 值扶踊,在文件中設(shè)置值或者加載不同的設(shè)置文件收津,以上配置在NODE項目中可正常運行

Vue項目中使用

在使用Vue Cli構(gòu)建的項目中歹颓,
需要將process.env 設(shè)置其他變量名進行使用铜秆,如:BUILD_ENV
在 package.json 的 script 字段中作如下配置:

  "scripts": {
    "start": "cross-env BUILD_ENV=dev node build/dev-server.js",
    "dev": "cross-env BUILD_ENV=dev  node build/dev-server.js",
    "build": "cross-env BUILD_ENV=dev node build/build.js",
    "buildDev": "cross-env BUILD_ENV=dev  node build/build.js",
    "buildStag": "cross-env BUILD_ENV=stag  node build/build.js",
    "buildProd": "cross-env BUILD_ENV=prod  node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },

由于搭配webpack重新設(shè)置了 process.env 的值奢米,需要在
webpack.dev.conf.js 及 webpack.prod.conf.js 文件中:

webpack.dev.conf.js
new webpack.DefinePlugin({
    'process.env': config.dev.env,
    'process.env.BUILD_ENV': JSON.stringify(process.env.BUILD_ENV)//增加此行
})

webpack.prod.conf.js
new webpack.DefinePlugin({
    'process.env': env,
    'process.env.BUILD_ENV': JSON.stringify(process.env.BUILD_ENV)
})

即在該插件設(shè)置并暴露出 process.env 對象后抓韩,再增加
process.env.BUILD_ENV 字段并進行賦值

此時,可在前端JS文件中通過 process.env.BUILD_ENV 獲得 package.json中的script獲得對應值鬓长,進行其他操作谒拴,比如,引入不同環(huán)境的配置文件涉波,如:
在config文件夾中增加 buildConfig 文件夾英上,其中新建以下3個文件:
dev.config.js stag.config.js prod.config.js,
在每個文件中采用module.exports的方式導出變量,如:

module.exports = {
    BASE_URL: 'https://dev-api.greigreat.com',
    BASE_STATIC_URL:'https://static1.greigreat.com/'
}

在其他文件中使用

//引入環(huán)境配置文件
//process.env.BUILD_ENV 為 webpack中的DefinePlugin暴露出的環(huán)境變量
const buildConfig = require('./buildConfig/' + process.env.BUILD_ENV + '.config')
export default {
    baseUrl: buildConfig.BASE_URL,
    baseStaticUrl: buildConfig.BASE_STATIC_URL
}

則可以以對象的形式獲取 buildConfig并使用

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末啤覆,一起剝皮案震驚了整個濱河市苍日,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌窗声,老刑警劉巖相恃,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異笨觅,居然都是意外死亡拦耐,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門见剩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來杀糯,“玉大人,你說我怎么就攤上這事苍苞」毯玻” “怎么了?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長倦挂。 經(jīng)常有香客問我,道長担巩,這世上最難降的妖魔是什么方援? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮涛癌,結(jié)果婚禮上犯戏,老公的妹妹穿的比我還像新娘。我一直安慰自己拳话,他們只是感情好先匪,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著弃衍,像睡著了一般呀非。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上镜盯,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天岸裙,我揣著相機與錄音,去河邊找鬼速缆。 笑死降允,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的艺糜。 我是一名探鬼主播剧董,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼破停!你這毒婦竟也來了翅楼?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤真慢,失蹤者是張志新(化名)和其女友劉穎犁嗅,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晤碘,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡褂微,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了园爷。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宠蚂。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖童社,靈堂內(nèi)的尸體忽然破棺而出求厕,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布呀癣,位于F島的核電站美浦,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏项栏。R本人自食惡果不足惜浦辨,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望沼沈。 院中可真熱鬧流酬,春花似錦、人聲如沸列另。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽页衙。三九已至摊滔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間店乐,已是汗流浹背惭载。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留响巢,地道東北人描滔。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像踪古,于是被迫代替她去往敵國和親含长。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容