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

vue cli中env的使用指南

 更新時(shí)間:2021年08月20日 10:22:58   作者:guojikun  
眾所周知,一個(gè)項(xiàng)目在開發(fā)、測(cè)試與生產(chǎn)環(huán)境的各種配置變量是不一樣的,但在vue cli 3中通過(guò)指令vue create xxx創(chuàng)建的項(xiàng)目取消了默認(rèn)的 config 和 build 文件夾,這導(dǎo)致剛?cè)胧值男』锇椴恢涝谀膬号渲铆h(huán)境變量,不過(guò)官方也提供了相應(yīng)的配置方法,本文就來(lái)介紹一下

前言

相信使用過(guò) vueCli 開發(fā)項(xiàng)目的小伙伴有點(diǎn)郁悶,正常開發(fā)時(shí)會(huì)有三個(gè)接口環(huán)境(開發(fā),測(cè)試,正式),但是 vueCli 只提供了兩種 development,production(不包含 test-單測(cè))模式。其實(shí)這是小伙伴們沒(méi)有理解 vueCli 文檔所導(dǎo)致的。

vueCli 命令中 --mode 對(duì)應(yīng)的 .env.[mode],而不是 NODE_ENV

注意

除了 VUE_APP_ 變量之外。

還有兩個(gè)特殊的變量:

  • NODE_ENV: 是 development、production、test 中的一個(gè)。其值取決于應(yīng)用運(yùn)行的模式。
  • BASE_URL: 和 vue.config.js 中的 publicPath 選項(xiàng)相符,即你的應(yīng)用會(huì)部署到的基礎(chǔ)路徑。

簡(jiǎn)介-官方

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

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

你可以通過(guò)傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫默認(rèn)的模式。

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

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

例如通過(guò)將 NODE_ENV 設(shè)置為 "test",Vue CLI 會(huì)創(chuàng)建一個(gè)優(yōu)化過(guò)后的,并且旨在用于單元測(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í),無(wú)論你要部署到哪個(gè)環(huán)境,應(yīng)該始終把 NODE_ENV 設(shè)置為 "production" 來(lái)獲取可用于部署的應(yīng)用程序。

示例配置

我們現(xiàn)在有三個(gè)配置文件,分別如下

#.env.development
NODE_ENV=development
VUE_APP_AXIOS_BASEURL=http://xxxx
#.env.preview 測(cè)試環(huán)境的配置
NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx
#.env.production
NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx

在 axios 中使用

import axios from "axios";
const conf = {
  baseURL: process.env.VUE_APP_AXIOS_BASEURL,
};
return axios.create(conf);

package.json 配置

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode preview",
    "build:release": "vue-cli-service build"
  }
}

啟動(dòng)方式

npm run serve # 默認(rèn) dev
npm run build # 測(cè)試環(huán)境
npm run build:release # 正式環(huán)境

到此這篇關(guān)于vue cli中env的使用指南的文章就介紹到這了,更多相關(guān)vue cli env內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue3中正確使用ElementPlus的示例代碼

    Vue3中正確使用ElementPlus的示例代碼

    這篇文章主要介紹了Vue3中正確使用ElementPlus的示例代碼,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-01-01
  • Vue中計(jì)算屬性和監(jiān)聽屬性及數(shù)據(jù)的響應(yīng)式更新和依賴收集基本原理講解

    Vue中計(jì)算屬性和監(jiān)聽屬性及數(shù)據(jù)的響應(yīng)式更新和依賴收集基本原理講解

    computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下
    2023-03-03
  • Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用

    Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用

    本文主要介紹了Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • 基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)

    基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)

    這篇文章主要介紹了 基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn),詳細(xì)介紹了使用vue編寫的日期組件,,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。
    2017-03-03
  • Vue項(xiàng)目中Websocket的使用實(shí)例

    Vue項(xiàng)目中Websocket的使用實(shí)例

    WebSocket就誕生了,它最大特點(diǎn)就是服務(wù)器可以主動(dòng)向客戶端推送信息,客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息,是真正的雙向平等對(duì)話,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中Websocket使用的相關(guān)資料,需要的朋友可以參考下
    2023-02-02
  • 詳解Vue的監(jiān)聽屬性

    詳解Vue的監(jiān)聽屬性

    這篇文章主要為大家介紹了Vue的監(jiān)聽屬性,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-11-11
  • Vue 中獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新的實(shí)現(xiàn)代碼

    Vue 中獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新的實(shí)現(xiàn)代碼

    這篇文章主要介紹了Vue 中獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-05-05
  • vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)

    vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)

    今天小編就為大家分享一篇vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • vue-cli3項(xiàng)目生產(chǎn)和測(cè)試環(huán)境分包后文件名和數(shù)量不一致解決

    vue-cli3項(xiàng)目生產(chǎn)和測(cè)試環(huán)境分包后文件名和數(shù)量不一致解決

    這篇文章主要為大家介紹了vue-cli3項(xiàng)目生產(chǎn)和測(cè)試環(huán)境分包后文件名和數(shù)量不一致解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • elementui上傳文件不允許重名的解決方案

    elementui上傳文件不允許重名的解決方案

    用戶可以多文件上傳 ,在上傳到服務(wù)器之前需要檢查服務(wù)器中有無(wú)重名的文件,如果有會(huì)返回重名文件的名稱數(shù)組,這些文件需要一個(gè)一個(gè)的向用戶確認(rèn)是否要覆蓋重傳,這篇文章主要介紹了elementui上傳文件不允許重名,需要的朋友可以參考下
    2024-02-02

最新評(píng)論