深入淺析vue中cross-env的使用
cross-env
cross-env是跨平臺(tái)設(shè)置和使用環(huán)境變量的腳本。
在大多數(shù)Windows命令行中在使用NODE_ENV = production設(shè)置環(huán)境變量時(shí)會(huì)報(bào)錯(cuò)。同樣，Windows和Linux命令如何設(shè)置環(huán)境變量也有所不同。
使用 cross-env 可以設(shè)置在不同的平臺(tái)上有相同的NODE_ENV參數(shù)。
使用
安裝
npm install cross-env --save-dev
package.json
"scripts": {
"serve": "cross-env NODE_ENV=development vue-cli-service serve --open",
"build": "cross-env NODE_ENV=production vue-cli-service build"
}
development
production
process為node的全局變量
適用場(chǎng)景
適用于本地線上環(huán)境有差異的場(chǎng)景，例如本地線上使用不用的開發(fā)域名則可以通過(guò) NODE_ENV 來(lái)判斷
if(process.env.NODE_ENV!='development'){
//線上環(huán)境
}
知識(shí)點(diǎn)擴(kuò)展：cross-env使用筆記
cross-env能跨平臺(tái)地設(shè)置及使用環(huán)境變量
大多數(shù)情況下，在windows平臺(tái)下使用類似于: NODE_ENV=production的命令行指令會(huì)卡住，windows平臺(tái)與POSIX在使用命令行時(shí)有許多區(qū)別（例如在POSIX，使用$ENV_VAR,在windows，使用%ENV_VAR%。。。）
cross-env讓這一切變得簡(jiǎn)單，不同平臺(tái)使用唯一指令，無(wú)需擔(dān)心跨平臺(tái)問(wèn)題
npm安裝方式
npm i --save-dev cross-env
在npm腳本(多是package.json)里這么配置
{
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
}
}
運(yùn)行npm run build，這樣NODE_ENV便設(shè)置成功，無(wú)需擔(dān)心跨平臺(tái)問(wèn)題
總結(jié)
以上所述是小編給大家介紹的vue中cross-env的使用,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了vue中可以綁定多個(gè)事件嗎，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-quill-editor富文本編輯器簡(jiǎn)單使用方法
這篇文章主要為大家詳細(xì)介紹了vue-quill-editor富文本編輯器簡(jiǎn)單使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
本篇文章主要介紹了深入對(duì)Vue.js $watch方法的理解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。2017-03-03
這篇文章為大家詳細(xì)介紹了vue.js中$watch的用法，文中給出了示例代碼，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友們可以一起看看吧。2016-10-10
VUE簡(jiǎn)單的定時(shí)器實(shí)時(shí)刷新的實(shí)現(xiàn)方法
這篇文章主要介紹了VUE簡(jiǎn)單的定時(shí)器實(shí)時(shí)刷新的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
vue 使用微信jssdk,調(diào)用微信相冊(cè)上傳圖片功能
這篇文章主要介紹了vue 使用微信jssdk,調(diào)用微信相冊(cè)上傳圖片功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue2.0 v-for filter列表過(guò)濾功能的實(shí)現(xiàn)
今天小編就為大家分享一篇Vue2.0 v-for filter列表過(guò)濾功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
解決webpack+Vue引入iView找不到字體文件的問(wèn)題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue mixins組件復(fù)用的幾種方式（小結(jié)）
這篇文章主要介紹了vue mixins組件復(fù)用的幾種方式（小結(jié)）,vue中提供了一種混合機(jī)制mixins，用來(lái)更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用,有興趣的可以了解一下2017-09-09
vue實(shí)現(xiàn)可移動(dòng)的懸浮按鈕
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可移動(dòng)的懸浮按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03