什么是vue全局環(huán)境變量和模式-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了什么是vue全局環(huán)境變量和模式，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

創(chuàng)新互聯(lián)建站是一家網(wǎng)站設(shè)計公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營產(chǎn)品：成都響應(yīng)式網(wǎng)站建設(shè)公司、成都品牌網(wǎng)站建設(shè)、成都全網(wǎng)營銷。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡(luò)互動的體驗，以及在手機(jī)等移動端的優(yōu)質(zhì)呈現(xiàn)。成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、移動互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營、VI設(shè)計、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價值服務(wù)。

我們可以在項目根目錄中的下列文件來指定環(huán)境變量：

.env                # 在所有的環(huán)境中被載入
.env.local          # 在所有的環(huán)境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略

一個環(huán)境文件只包含環(huán)境變量的“鍵=值”對,并且必須以VUE_APP開始:

FOO=bar     //無效
VUE_APP_SECRET=secret  有效

模式

模式是 Vue CLI 項目中一個重要的概念。默認(rèn)情況下，一個 Vue CLI 項目有三個模式：

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

了解模式以后，我們可以為對應(yīng)環(huán)境設(shè)置相應(yīng)的環(huán)境變量，比如：

  • 為 production 設(shè)置 .env.production
  • 為 development 設(shè)置 .env.development
  • *為一個特定模式準(zhǔn)備的環(huán)境文件 (例如 .env.production ) 將會比一般的環(huán)境文件 (例如 .env ) 擁有更高的優(yōu)先級

如果只需要在本地使用的話，可以在后面加入.local,比如 .env.local ,會git 忽略

在客戶端側(cè)代碼中，可以使用 process.env.VUE_APP_* 獲取應(yīng)用

注：process.env.NODE_ENV，獲取應(yīng)用運(yùn)行模式( "development" 、 "production" 或 "test" )

process.env.BASE_URL,應(yīng)用基礎(chǔ)路徑( vue.config.js 中的 publicPath 選項)

ps：下面看下淺談vue中環(huán)境變量和模式的作用

使用vue框架進(jìn)行前端開發(fā)也有一段時間了，遇到的問題可以大致分為2類：開發(fā)問題，部署問題。

開發(fā)方面的問題是最多的，也是大家經(jīng)常會遇到的，但是部署的問題也不容小覷，一旦部署出錯會造成嚴(yán)重的上線事故。

開發(fā)和測試時調(diào)用后臺接口的地址是和生產(chǎn)環(huán)境中不一樣的，有些時候需要跳轉(zhuǎn)到其他網(wǎng)頁，也需要測試和生產(chǎn)環(huán)境跳轉(zhuǎn)不同的頁面。

這些配置如果都用人工來維護(hù)，上測試環(huán)境注釋掉生產(chǎn)的代碼，上生產(chǎn)環(huán)境注釋掉測試的代碼，會很麻煩也很容易出錯。

所以有必要在一個入口進(jìn)行控制，這就要用到vue框架中的環(huán)境變量和模式。

在vue-cli3構(gòu)建的項目中，項目根目錄下創(chuàng)建.env.[模式]文件可以定義一種模式，在這個文件中定義的變量就是對應(yīng)模式的環(huán)境變量。

在本地啟動項目默認(rèn)是使用的development模式，使用build命令打包默認(rèn)是使用的production模式。但是我們一般都會有一個測試環(huán)境，在我們打測試包和生產(chǎn)包的時候都是用的是production模式，所以需要定義一個環(huán)境變量來進(jìn)行區(qū)分。

我目前的做法是創(chuàng)建.env.development，.env.test，.env.production三個模式文件。

每個模式文件中有3個環(huán)境變量：NODE_ENV（對應(yīng)當(dāng)前模式的名稱），VUE_APP_RUNTIME_ENV（對應(yīng)當(dāng)前環(huán)境的名稱），VUE_APP_BASE_URL（當(dāng)前環(huán)境向后臺發(fā)請求的baseurl）。

vue-cli3構(gòu)建的項目中默認(rèn)只有development模式和production模式，默認(rèn)的NODE_ENV分別是development和production，很多配置也只依據(jù)NODE_ENV區(qū)分這2種模式，但是我們需要有3種模式。生產(chǎn)和測試的包應(yīng)該是除了環(huán)江變量不同，其他都相同，所以同屬production模式。用額外的VUE_APP_RUNTIME_ENV來區(qū)分production和test環(huán)境。

定義完成之后，在項目中使用process.env.VUE_APP_RUNTIME_ENV即可訪問到變量的值。

package.json中也需要定義一條打測試包的命令：

"build-test": "vue-cli-service build --mode test"

表示打一個使用測試配置的身生產(chǎn)包。

以上就是關(guān)于什么是vue全局環(huán)境變量和模式的內(nèi)容，如果你們有學(xué)習(xí)到知識或者技能，可以把它分享出去讓更多的人看到。

分享文章：什么是vue全局環(huán)境變量和模式-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://muchs.cn/article28/dpdjjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站維護(hù)、網(wǎng)頁設(shè)計公司、用戶體驗、微信小程序、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司