# 【vue基礎篇】一看就懂的vue環境變量配置

這是基於cli3.x版本的環境變量配置指南。沒有過多複雜的介紹，只有極簡的實用配置。旨在給須要的朋友提供幫助以及本身溫故知新，真正一看就會懂，懂了就能用。

配置環境變量的目的

項目開發過程當中，至少會經歷開發環境、測試環境和生產環境(即正式環境)三個階段。不一樣階段請求的狀態(如接口地址等)不盡相同，若手動切換接口地址是至關繁瑣且易出錯的。因而環境變量配置的需求就應運而生，咱們只需作簡單的配置，把環境狀態切換的工做交給代碼。

配置步驟

1. 首先在項目根目錄下(與package.json同級)新建三個".env"文件

如上，三個".env"文件後綴名爲development、production、test，分別對應爲開發環境、生產環境和測試環境

.env.development

.env.production

.env.test

2. 配置package.json文件

在 vue-cli-service 命令後加上對應".env"文件名字。配置完成後，當咱們運行 npm run xxx 命令時會執行對應的".env"文件。從而實現環境變量配置功能。

3. 使用配置的環境變量

配置vue.config.js文件

在根目錄下新建 「vue.config.js」 文件，並打印 process.env.VUE_APP_SERVER_URL 的內容，而後運行 npm run serve 命令。能夠看到命令行在執行「vue-cli-service serve」的同時加上了「--mode development」，緊接着輸出了「.env.development」文件內的接口地址————「http://development」。說明此時咱們的環境變量已經配置成功了！

接下來運行npm run build 命令

咱們發現命令行執行了「vue-cli-serve build」的同時加上了「--mode production」，而且輸出的接口地址也對應更改了。再看左側目錄下新增了一個打包後的文件夾。再次說明咱們的環境變量已經配置成功了！

最後再極其不肯的執行npm run test 命令

吶，一樣作了對應的輸出與更改。至此，咱們的vue環境變量配置圓滿成功！

須要注意，在使用的時候記得調用 process.env 變量哦

順便一提，在生產環境下記得設置productionSourceMap值爲false，以減小打包後的項目體積(大概能減小百分之六七十左右)，這只是vue項目優化的一個點，此處不作過多講解，有關項目優化內容下次再單獨寫一篇文章。

結語

• ".env"文件命名不必定非要development、production、test。是能夠自定義的，前提是得在package.json裏面作對應的名稱修改！(注意命名要語義化方便理解)

• 詳情參照cli官方文檔

• 感謝你們支持，如有不足或錯誤的地方請多指正。一塊兒學習進步！筆芯~