欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中.env、.env.development及.env.production文件說明

 更新時(shí)間:2022年09月20日 14:19:42   作者:學(xué)學(xué)學(xué)無止境  
這篇文章主要給大家介紹了關(guān)于Vue中.env、.env.development及.env.production文件說明的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

0.介紹

模式是Vue CLI項(xiàng)目中一個(gè)重要的概念,默認(rèn)情況下,一個(gè)Vue CLI項(xiàng)目有三種模式:

  • developemt 模式用于vue-cli-service serve
  • test 模式用于vue-cli-service test:unit
  • production 模式用于vue-cli-service build 和vue-cli-service test:e2e

當(dāng)運(yùn)行vue-cli-service命令時(shí),所有的環(huán)境變量都從對(duì)應(yīng)的環(huán)境文件中載入。如果文件內(nèi)部不包含NODE_EVN變量,它的值取決于模式。例如,咋production模式下被設(shè)置為“production”,在test模式下被設(shè)置為“test”,默認(rèn)的模式則是“developemt”

NODE_EVN將決定你的應(yīng)用運(yùn)行的模式,是開發(fā),生產(chǎn)還是測(cè)試,因此也決定了創(chuàng)建哪種webpack配置

例如通過將 NODE_ENV 設(shè)置為 "test",Vue CLI 會(huì)創(chuàng)建一個(gè)優(yōu)化過后的,并且旨在用于單元測(cè)試的 webpack 配置,它并不會(huì)處理圖片以及一些對(duì)單元測(cè)試非必需的其他資源。

同理,NODE_ENV=development 創(chuàng)建一個(gè) webpack 配置,該配置啟用熱更新,不會(huì)對(duì)資源進(jìn)行 hash 也不會(huì)打出 vendor bundles,目的是為了在開發(fā)的時(shí)候能夠快速重新構(gòu)建。

當(dāng)你運(yùn)行 vue-cli-service build 命令時(shí),無論你要部署到哪個(gè)環(huán)境,應(yīng)該始終把 NODE_ENV 設(shè)置為 "production" 來獲取可用于部署的應(yīng)用程序。

1.在Vue項(xiàng)目中,通常配置文件有:

  • env 全局默認(rèn)配置文件,無論什么環(huán)境都會(huì)加載合并
  • .env.development 開發(fā)環(huán)境下的配置文件
  • .env.production 生產(chǎn)環(huán)境下的配置文件

2.命名規(guī)則

注意:屬性名必須以VUE_APP開頭,比如VUEP_APP_XXX

3.關(guān)于文件的加載:

關(guān)于啟動(dòng)命令Vue會(huì)自動(dòng)加載對(duì)應(yīng)的環(huán)境,vue是根據(jù)文件名進(jìn)行加載的

比如當(dāng)你執(zhí)行npm run serve命令,會(huì)自動(dòng)加載.env.development文件

npm run serve ----NODE_EVN=development

注意:.env文件無論是來發(fā)還是生產(chǎn)都會(huì)加載

 如上圖,如果我們運(yùn)行npm run serbe就會(huì)先加載.env文件,之后加載.env.development文件,兩個(gè)文件有同一項(xiàng),則后加載的文件就會(huì)覆蓋掉第一個(gè)文件,即.env.development文件覆蓋掉了.env文件的NOOE_ENV選項(xiàng)

同理,如果執(zhí)行了npm run build,則就是執(zhí)行了.evn和.env.production文件

npm run build ---NODE_EVN = production

4.關(guān)于使用

直接調(diào)用process.evn屬性(全局屬性,任何地方都可以使用)

例如:直接打印process.evn屬性:

4.1 在.vue文件中使用

4.2 在.js文件中 

 注意:js文件中可以添加JSON.stringfy(xxx),解析成字符,但是vue中不能

5.自定義環(huán)境

第一步:創(chuàng)建.evn.test文件

第二部:配置環(huán)境及地址

# 測(cè)試環(huán)境
NODE_ENV=production
VUE_APP_ENV=test
#請(qǐng)求接口基準(zhǔn)地址
VUE_APP_BASE_API=地址一
#業(yè)務(wù)系統(tǒng)地址
VUE_APP_protalUrl=地址二
#市門戶地址
VUE_APP_menhuUrl=地址三
#騰訊統(tǒng)計(jì)分析id
VUE_APP_sid=騰訊ID

第三步:配置package.json

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "test": "vue-cli-service build --mode test"
    },

配置完成,使用命令npm run test 即可以打包test環(huán)境的包。

最后,附上一張總結(jié)圖

總結(jié)

到此這篇關(guān)于Vue中.env、.env.development及.env.production文件說明的文章就介紹到這了,更多相關(guān)Vue .env、.env.development及.env.production內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Element UI框架中巧用樹選擇器的實(shí)現(xiàn)

    Element UI框架中巧用樹選擇器的實(shí)現(xiàn)

    這篇文章主要介紹了Element UI框架中巧用樹選擇器的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • 詳解Vue與VueComponent的關(guān)系

    詳解Vue與VueComponent的關(guān)系

    這篇文章主要為大家介紹了Vue與VueComponent的關(guān)系,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-12-12
  • Vue?Validate表單組件的封裝詳解

    Vue?Validate表單組件的封裝詳解

    這篇文章主要為大家詳細(xì)介紹了Vue?Validate表單組件的封裝的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解下
    2023-09-09
  • VUE?組件的計(jì)算屬性詳解

    VUE?組件的計(jì)算屬性詳解

    這篇文章主要介紹了VUE組件的計(jì)算屬性詳解,使用計(jì)算機(jī)屬性還是methods取決于你是否需要緩存,當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí),應(yīng)當(dāng)使用計(jì)算機(jī)屬性,除非你不希望得到緩存,下文來了解具體詳情
    2022-06-06
  • Vue中inheritAttrs的使用實(shí)例詳解

    Vue中inheritAttrs的使用實(shí)例詳解

    這篇文章主要介紹了Vue中inheritAttrs的使用實(shí)例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-12-12
  • vue3數(shù)據(jù)更新而視圖未更新問題解決

    vue3數(shù)據(jù)更新而視圖未更新問題解決

    本文主要介紹了vue3?解決數(shù)據(jù)更新而視圖未更新問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-10-10
  • vue獲取當(dāng)前激活路由的方法

    vue獲取當(dāng)前激活路由的方法

    下面小編就為大家分享一篇vue獲取當(dāng)前激活路由的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue中$set與$delete的使用及說明

    vue中$set與$delete的使用及說明

    這篇文章主要介紹了vue中$set與$delete的使用及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue實(shí)現(xiàn)簡(jiǎn)單滑塊驗(yàn)證

    vue實(shí)現(xiàn)簡(jiǎn)單滑塊驗(yàn)證

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單滑塊驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)

    Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)

    這篇文章主要介紹了Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用,計(jì)算屬性指的是通過一系列運(yùn)算之后,最終得到一個(gè)值,watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化,從而針對(duì)數(shù)據(jù)的變化做特定的操作,本文就這兩種屬性給大家詳細(xì)講解,感興趣的朋友一起學(xué)習(xí)吧
    2022-11-11

最新評(píng)論