vue-cli3.0 環(huán)境變量與模式配置方法
vue-cli3.0移除了配置文件目錄： config和build文件夾?？梢哉f是非常的精簡了，那移除了配置文件目錄后如何自定義配置環(huán)境變量和模式呢?
為什么需要配置環(huán)境變量和模式呢？
所有方法肯定是來源于現(xiàn)實的需求。在一個產(chǎn)品的前端開發(fā)過程中，一般來說會經(jīng)歷本地開發(fā)、測試腳本、開發(fā)自測、測試環(huán)境、預(yù)上線環(huán)境，然后才能正式的發(fā)布。對應(yīng)每一個環(huán)境可能都會有所差異，比如說服務(wù)器地址、接口地址、websorket地址…… 等等。在各個環(huán)境切換的時候，就需要不同的配置參數(shù)，所以就可以用環(huán)境變量和模式，來方便我們管理。
環(huán)境變量
cli-3.0總共提供了四種方式來制定環(huán)境變量：
1.在根目錄添加.env文件，配置所有情況下都會用到的配置（不知道這個存在的意義，所有的都需要的也就不需要配置了吧）。
2.在根目錄添加.env.local 文件，配置所有情況下都會用到的配置，與.env的區(qū)別是只會在本地，該文件不會被git跟蹤。
3.在根目錄添加.env.[mode] 文件，配置對應(yīng)某個模式下的配置,比如：.env.development來配置開發(fā)環(huán)境的配置。
4.在根目錄添加.env.[mode].local文件，配置對應(yīng)某個模式下的配置,與.env.[mode]的區(qū)別也只是會在本地生效，該文件不會被git跟蹤。
在文件中，我們只需要以key=value的方式就可以設(shè)置變量了。
例如：
FOO=bar VUE_APP_SECRET=secret
環(huán)境變量的使用
設(shè)置完環(huán)境變量之后就可以在我們的項目中使用這兩個變量了。不過還需要注意的是在項目的不同地方使用，限制也不一樣。
1.在項目中，也就是src中使用環(huán)境變量的話，必須以VUE_APP_開頭。例如我們可以在main.js中直接輸出：console.log(process.env.VUE_APP_SECRET)
2.在webpack配置中使用，沒什么限制，可以直接通過process.env.XXX來使用
3.在public/index.html中使用的：分三類：（沒怎么用過）
<%= VAR %> 用于非轉(zhuǎn)換插值 例如：`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >` <%- VAR %> 用于HTML轉(zhuǎn)義插值 <% expression %> 用于JavaScript控制流
模式
模式是Vue CLI項目中的一個重要概念。默認(rèn)情況下，Vue CLI項目中有三種模式：
1.development：在vue-cli-service serve下，即開發(fā)環(huán)境使用
2.production：在vue-cli-service build 和vue-cli-service test:e2e下，即正式環(huán)境使用
3.test： 在vue-cli-service test:unit下使用
另外，如果你想要修改模式下默認(rèn)的環(huán)境變量的話可以通過--mode來實現(xiàn)，例如：
"dev-build": "vue-cli-service build --mode development"
有環(huán)境變量就能完成我們的需求了，為什么需要有模式的存在，這里我沒查到詳細(xì)的文檔，個人認(rèn)為模式是為了提供給第三方的插件一個辨識。例如vuex可以根據(jù)模式的不同，在development自動注入devtoolPlugin插件，利于開發(fā)，而在production中檢測到錯誤不會進行console。
舉例
說完了概念，可能還是比較模糊，可以試著添加一個stage環(huán)境，用來模擬預(yù)上線。
首先在package.json添加一種類型，并修改默認(rèn)環(huán)境變量為stage環(huán)境變量
在根目錄下創(chuàng)建.env.stage文件，來聲明變量：
這里聲明的NODE_ENV = ‘production'用來表示這是生產(chǎn)環(huán)境。VUE_APP_CURRENTMODE為項目變量，outputDir為除數(shù)打包后文件的地址。
在vue.config.js中使用環(huán)境變量，制定輸出文件為環(huán)境變量配置的文件：
最后執(zhí)行命令yarn stage能看到根目錄下生成了stage文件：
這樣我們就配置完了stage環(huán)境。詳細(xì)的項目地址可以參考：以vue-cli3.0為基礎(chǔ)，結(jié)合vue-router、vuex、axios、iview組件庫搭建一個工程化前端demo
參考文檔：Environment Variables and Modes
總結(jié)
以上所述是小編給大家介紹的vue-cli3.0 環(huán)境變量與模式配置方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Token是身份驗證后服務(wù)端返回的令牌,常用于訪問授權(quán)API和頁面權(quán)限校驗,Token數(shù)據(jù)可存儲在本地或Vuex中,本地存儲可實現(xiàn)數(shù)據(jù)持久化,這篇文章主要介紹了vue登錄成功之后的token處理詳細(xì)步驟,需要的朋友可以參考下2024-10-10
這篇文章主要為大家介紹了vue的Des加密解密使用實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
在 Vue 中，一些簡單的功能，我們可以直接定義為全局方法，然后掛到 Vue 上就能使用了，這篇文章主要介紹了Vue3?中自定義插件的實現(xiàn),需要的朋友可以參考下2022-08-08
本篇文章主要介紹了在vue-cli項目中使用bootstrap的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Vue中利用better-scroll組件實現(xiàn)橫向滾動功能
橫向滾動這個功能是我們?nèi)粘ｉ_發(fā)中經(jīng)常會遇到的一個需求,下面這篇文章主要給大家介紹了關(guān)于Vue中如何利用better-scroll組件實現(xiàn)橫向滾動的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了Vuex入門到上手教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Vue3的provide和inject實現(xiàn)多級傳遞的原理解析
Vue3中的provide和inject函數(shù)通過原型鏈實現(xiàn)數(shù)據(jù)的多級傳遞,父組件使用provide注入數(shù)據(jù),子組件和后代組件通過inject獲取這些數(shù)據(jù),在創(chuàng)建組件實例時,子組件會繼承父組件的provides屬性對象,介紹Vue3的provide和inject實現(xiàn)多級傳遞的原理,需要的朋友可以參考下2024-12-12
在現(xiàn)代前端開發(fā)中,單頁應(yīng)用（SPA）已經(jīng)成為主流,而 Vue.js 作為一款流行的前端框架,其官方路由庫 Vue Router 則是構(gòu)建 SPA 的核心工具之一,在使用 Vue Router 的過程中,開發(fā)者可能會遇到一些常見的錯誤,本文將深入探討這一錯誤的原因、影響以及解決方案2025-01-01
Vue中的methods、watch、computed的區(qū)別
這篇文章主要介紹了Vue中的methods、watch、computed的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家分享了vue多級多選菜單組件開發(fā)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10