vue中process.env的具體使用
一、介紹
1、process
process是 nodejs 下的一個(gè)全局變量，它存儲(chǔ)著 nodejs 中進(jìn)程有關(guān)的信息。
2、process.env
env 是 environment 的簡(jiǎn)稱，
process.env屬性返回一個(gè)包含用戶環(huán)境的對(duì)象。
3、dotenv
Dotenv 是一個(gè)零依賴的模塊，它能將環(huán)境變量中的變量從 .env 文件加載到 process.env 中。
在終端中輸入node進(jìn)入node環(huán)境再輸入process.env，可以打印出信息如下圖：
二、使用
1、在nodejs中使用
1、安裝
npm install dotenv
2、根目錄下創(chuàng)建 .env 文件
HOST = localhost PORT = 8080
3、入口文件中引入 dotenv 并使用
require("dotenv").config({path: '.env'})
console.log(process.env.HOST); // localhost
console.log(process.env.PORT); // 8080
2、在vue中使用
在使用腳手架創(chuàng)建項(xiàng)目的時(shí)候，會(huì)自動(dòng)安裝dotenv，可以從package-lock.json中找到配置
在main.js入口文件中打印
console.log(process.env);
可以看出，默認(rèn)的模式是development即開(kāi)發(fā)模式。
模式
官網(wǎng)描述如下：https://cli.vuejs.org/zh/guide/mode-and-env.html
也就是說(shuō)，在Vue中， NODE_ENV 可以通過(guò) .env 文件或者.env.[mode]文件配置。配置過(guò)后，運(yùn)行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）時(shí)，就會(huì)將該模式下的NODE_ENV載入其中了。而這些命令，都有自己的默認(rèn)模式：
npm run dev(serve)，其實(shí)是運(yùn)行了vue-cli service serve，默認(rèn)模式為development?？梢栽?.env.development文件下修改該模式的NODE_ENV。npm run build，其實(shí)運(yùn)行了vue-cli service build，默認(rèn)模式為production?？梢栽?code> .env.production 文件下修改該模式的NODE_ENV。
在根目錄下創(chuàng)建文件
NODE_ENV = production
注意：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 開(kāi)頭的變量將通過(guò) webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側(cè)的代碼中。這是為了避免意外公開(kāi)機(jī)器上可能具有相同名稱的私鑰。
NODE_ENV = development VUE_APP_BASE_API = 'http://localhost:8099/'
再打印 process.env的信息如下：
注意：.env 環(huán)境文件是通過(guò)運(yùn)行 vue-cli-service 命令載入的，因此環(huán)境文件發(fā)生變化，你需要重啟服務(wù)。
除了以上的修改方式外，也可以在命令后直接使用--mode參數(shù)手動(dòng)指定模式。
到此這篇關(guān)于vue中process.env的具體使用的文章就介紹到這了,更多相關(guān)vue process.env內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue父子組件slot插槽的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue2?this?能夠直接獲取到?data?和?methods?的原理分析
這篇文章主要介紹了Vue2?this能夠直接獲取到data和methods的原理分析，因?yàn)閙ethods里的方法通過(guò)bind指定了this為new?Vue的實(shí)例2022-06-06
這篇文章主要給大家介紹了關(guān)于Vue+element-ui添加自定義右鍵菜單的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
手寫(xiě)實(shí)現(xiàn)Vue計(jì)算屬性
這篇文章主要介紹了手寫(xiě)實(shí)現(xiàn)Vue計(jì)算屬性，本文從一個(gè)簡(jiǎn)單的計(jì)算屬性例子開(kāi)始，一步步實(shí)現(xiàn)了計(jì)算屬性。并且針對(duì)這個(gè)例子，詳細(xì)分析了頁(yè)面渲染時(shí)的整個(gè)代碼執(zhí)行邏輯，需要的小伙伴可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue2中Element?UI表單的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
vue高級(jí)組件之provide與inject使用及說(shuō)明
這篇文章主要介紹了vue高級(jí)組件之provide與inject使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3+element Plus如何實(shí)現(xiàn)彈框的拖拽、可點(diǎn)擊底層頁(yè)面功能
這篇文章主要介紹了vue3+element Plus如何實(shí)現(xiàn)彈框的拖拽、可點(diǎn)擊底層頁(yè)面功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
vue深拷貝的三種實(shí)現(xiàn)方式：1、通過(guò)遞歸方式實(shí)現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實(shí)現(xiàn)深拷貝,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
Vue ElementUI中el-table表格嵌套樣式問(wèn)題小結(jié)
這篇文章主要介紹了Vue ElementUI中el-table表格嵌套樣式問(wèn)題小結(jié),兩個(gè)表格嵌套,當(dāng)父表格有children數(shù)組時(shí)子表格才展示,對(duì)Vue ElementUI中el-table表格嵌套樣式問(wèn)題感興趣的朋友跟隨小編一起看看吧2024-02-02