vue中.env文件配置環(huán)境變量的實現(xiàn)
.env 文件配置
1?? 文件說明
.env:全局默認(rèn)配置文件,無論什么環(huán)境都會加載合并。
.env.development:開發(fā)環(huán)境的配置文件
.env.production:生產(chǎn)環(huán)境的配置文件
注意:三個文件的文件名必須按.env方式命名,不能亂起名,否則讀取不到文件。
2?? 內(nèi)容格式
注意:屬性名必須以 VUE_APP_ 開頭,如:VUE_APP_XXX
3?? 加載
vue 會根據(jù)啟動命令自動加載相對應(yīng)的環(huán)境配置文件。vue是根據(jù)文件名進(jìn)行加載的,所以上面說“不要亂起名,也無需專門控制加載哪個文件”
比如執(zhí)行npm run serve命令,會自動加載.env.development文件
開發(fā)環(huán)境加載 .env 和 .env.development 。
生成環(huán)境加載 .env 和 .env.production 。
運行npm run serve的時候主要還是看package.json中 server屬性的–mode后面跟的是啥。如果是development,就會加載.env.development文件。
在package.json里面配置好,執(zhí)行serve的時候用開發(fā)環(huán)境的。build打包用生產(chǎn)或者測試的
package.json 配置項:
"scripts": { "serve": "vue-cli-service serve --mode development", "build": "vue-cli-service build", "build:sit": "vue-cli-service build --mode production.sit", "build:uat": "vue-cli-service build --mode production.uat", "build:prod": "vue-cli-service build --mode production", "lint": "vue-cli-service lint", "et": "node_modules/.bin/et", "et:init": "node_modules/.bin/et -i", "et:list": "gulp themes" }
4?? 優(yōu)先級
環(huán)境配置文件 > 全局配置文件
當(dāng)全局的配置文件和環(huán)境的配置文件有相同配置項時,環(huán)境的配置項會覆蓋全局的配置項(.env默認(rèn)執(zhí)行,后面執(zhí)行的.env.developmemt的話有相同屬性的會覆蓋.env)
如:
開發(fā)環(huán)境
打印 process.env 屬性(全局屬性,任何地方均可使用):
從上面圖片中可知,.env 中的全局屬性 VUE_APP_PREVIEW 與 VUE_APP_API_BASE_URL 被覆蓋。
.env 中的全局屬性 VUE_APP_AGE 被保留。
5?? 項目中的使用
在配置文件中定義的屬性在其它文件中如何訪問呢??
可以使用 process.env.xxx 來訪問屬性。
如:
到此這篇關(guān)于vue中.env文件配置環(huán)境變量的實現(xiàn)的文章就介紹到這了,更多相關(guān)vue .env配置環(huán)境變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章
相關(guān)文章
Vue渲染器設(shè)計實現(xiàn)流程詳細(xì)講解
在瀏覽器平臺上,用它來渲染其中的真實DOM元素。渲染器不僅能夠渲染真實的DOM元素,它還是框架跨平臺能力的關(guān)鍵。所以在設(shè)計渲染器的時候一定要考慮好自定義的能力2023-01-01vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例
這篇文章主要介紹了vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05vue在mounted拿不到props中傳遞的數(shù)據(jù)問題
這篇文章主要介紹了vue在mounted拿不到props中傳遞的數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03Vue3-新特性defineOptions和defineModel示例詳解
在Vue3.3中新引入了defineOptions宏主要是用來定義Option API的選項,可以用defineOptions定義任意的選項,props、emits、expose、slots除外,本文給大家介紹Vue3-新特性defineOptions和defineModel,感興趣的朋友一起看看吧2023-11-11詳解vue中點擊空白處隱藏div的實現(xiàn)(用指令實現(xiàn))
本篇文章主要介紹了詳解vue中點擊空白處隱藏div的實現(xiàn)(用指令實現(xiàn)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04vue2使用el-date-picker實現(xiàn)動態(tài)日期范圍demo
這篇文章主要為大家介紹了vue2使用el-date-picker實現(xiàn)動態(tài)日期范圍示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06vue模塊導(dǎo)入報錯問題Module not found: Error:[CaseSensi
這篇文章主要介紹了vue模塊導(dǎo)入報錯問題Module not found: Error:[CaseSensitivePathsPlugin],具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06Vue3中Element-Plus分頁(Pagination)組件的使用
Element-Plus分頁(Pagination)組件在開發(fā)過程中數(shù)據(jù)展示會經(jīng)常使用到,同時分頁功能也會添加到頁面中,下面我們就來學(xué)習(xí)一下它的具體使用,需要的可以參考一下2023-11-11antd?vue中,如何在form表單中的自定義組件使用v-decorator
antd?vue中,在form表單中的自定義組件使用v-decorator問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式
這篇文章主要介紹了Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06