Vuejs 基礎學習教程

• 2021 年 2 月 6 日
• 筆記

（四）構建基礎進階-env文件與環境設置

我們在實際開發中，我們一般會經歷項目的開發階段，測試階段，和最終上線階段，每個階段對於項目程式碼的需要可能都有所不同，那我們怎麼讓它在不同階段呈現不同的效果呢？我們下面看一下環境是不是可以解決這個問題呢？

介紹

1、配置文件

正確的配置環境首先我們要認識一下不同配置之間的關係。隨便畫個圖表示一下：

這裡說的是最全的的可能，我們可以看到不同的環境有著不同的配置，他們之間還有一些交集，就是他們的公公配置，那麼我們思考一下在vue中我們需要怎麼處理？
其實很簡單，就是在項目的跟目下創建不同的環境變數配置：
如：
.env 表示在所有環境中被載入
.env.local 表示在所有環境中被載入，但是git會自動忽略
.env.[mode] 表示只有指定的模式才會載入
.env.[mode].local 表示只有在指定的模式才會載入，但是會被git自動忽略
比如，我們在本地創建幾個環境配置，如下圖：

以.env.dev這個文件為例子，看一下這個文件中的環境變數怎麼寫

在腳本管理配置中載入這種環境模式試一下

馬上啟動一下看看這種環境是否生效

可以看到這種環境配置事情作用了的。

這裡其他的環境我們就不做詳細講解了，基本都八九不離十，這裡我需要記錄一下我測試的一些小發現，這些環境配置的優先權重是怎麼樣的呢。直接上乾貨：.env.[mode].local > .env.[mode] >.env.local >.env .
但是這裡說一下，除了環境的配置權重，不同的配置他們會進行合併操作，類似於Object.assign的用法。

2、額外配置

我們還可以通過新建配置文件的方式為不同的環境配置不同的變數，但是我們發現.env這種文件好像僅僅支援靜態值。那怎麼辦，這裡我想了一下發現可以手動在根目錄下創建一個自己的配置文件。

我們還可以直接在vue.config.js中直接注入這些動態地配置，這裡可以查閱一下chainWebpack這個屬性來修改DefinePlugin的值，我們看一下官網的寫法。

總結

環境的配置和管理對於項目的構建很重要，通過不同的項目配置可以增加靈活性，提高程式的擴展性，也可以幫我們有效的分析和定位不同環境下的運行機制和問題。

//www.dtmao.cc/news_show_1309867.shtml