使用vue框架進行前端開發也有一段時間了，遇到的問題可以大致分為2類：開發問題，部署問題。
開發方面的問題是最多的，也是大家經常會遇到的，但是部署的問題也不容小覷，一旦部署出錯會造成嚴重的上線事故。
開發和測試時調用后台接口的地址是和生產環境中不一樣的，有些時候需要跳轉到其他網頁，也需要測試和生產環境跳轉不同的頁面。
這些配置如果都用人工來維護，上測試環境注釋掉生產的代碼，上生產環境注釋掉測試的代碼，會很麻煩也很容易出錯。
所以有必要在一個入口進行控制，這就要用到vue框架中的環境變量和模式。
在vue-cli3構建的項目中，項目根目錄下創建.env.[模式]文件可以定義一種模式，在這個文件中定義的變量就是對應模式的環境變量。
在本地啟動項目默認是使用的development模式，使用build命令打包默認是使用的production模式。但是我們一般都會有一個測試環境，在我們打測試包和生產包的時候都是用的是production模式，所以需要定義一個環境變量來進行區分。
我目前的做法是創建.env.development，.env.test，.env.production三個模式文件。
每個模式文件中有3個環境變量：NODE_ENV（對應當前模式的名稱），VUE_APP_RUNTIME_ENV（對應當前環境的名稱），VUE_APP_BASE_URL（當前環境向后台發請求的baseurl）。
vue-cli3構建的項目中默認只有development模式和production模式，默認的NODE_ENV分別是development和production，很多配置也只依據NODE_ENV區分這2種模式，但是我們需要有3種模式。生產和測試的包應該是除了環江變量不同，其他都相同，所以同屬production模式。用額外的VUE_APP_RUNTIME_ENV來區分production和test環境。
定義完成之后，在項目中使用process.env.VUE_APP_RUNTIME_ENV即可訪問到變量的值。
package.json中也需要定義一條打測試包的命令：