關於vue設定環境變數全流程

2022-03-29 13:00:59

vue設定環境變數

在開發的時候一般會有是三個環境：開發環境測試環境線上環境

vue 中有個概念就是模式，預設先vue cli 有三個模式

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

但是往往開發的時候可能不止有三種：

本地環境（local）
開發環境（development）
測試環境（devtest）
預釋出環境（beta）
生產環境（production）

參考連結：設定環境變數

建立不同環境變數檔案

如官方檔案所說，通過為.env檔案增加字尾來設定某個模式下特有的環境變數。我這裡有5個環境，所以設定了5個.env檔案。如下圖：

給.env檔案新增內容

基本格式如下：

NODE_ENV=環境名稱VUE_APP_URL=對應的環境地址

如我本地環境的設定就如下圖所示：

我本地是用的easy-mock模擬的資料，所以設定的地址是mock介面地址。

在package.json中新增不同環境對應的執行語句

如官方檔案所說，可以通過傳遞 --mode 來設定不同的模式。我自己的專案設定如下圖：

使用

檔案已建立好，設定語句也已寫好。怎麼用它呢？

首頁你需要哪個環境，就執行哪個環境的命令語句。

比如我現在需要local環境，就執行 npm run local-serve 。

如下圖所示：

然後通過 process.env.NODE_ENV 獲取環境名；通過 process.env.VUE_APP_URL 獲取環境對應的url。

比如我們在axios請求中，就可以把它的baseURL設定為 process.env.VUE_APP_URL

如下圖所示：

如果你不確定你自己現在是在哪個環境變數下，可以 console.log(“當前環境變數：”+process.env.NODE_ENV) 和 console.log(“當前環境路徑：”+process.env.VUE_APP_URL) 看下。

總而言之就是，你需要哪個環境變數，就【npm run 對應的環境變數】就完事了！

多環境變數

什麼是多環境變數？

專案在執行時會根據啟動的指令來執行不同的環境，在不同的環境中，我們設定對應所需的變數來滿足我們的開發需求，稱為多環境變數。

環境一般分為開發環境，測試環境，生產環境

設定流程

1、在專案根目錄下的package.json中設定serve test build

通過 --mode xxx 來執行不同環境

"scripts": {
  "serve": "vue-cli-service serve --open",
  "test": "vue-cli-service build --mode testing",
  "build": "vue-cli-service build",
}

–open 是執行的時候自動開出頁面

通過 npm run serve 啟動本地 , 執行 development
通過 npm run test 打包測試 , 執行 testing
通過 npm run build 打包正式 , 執行 production

2、在專案根目錄下建立.env.*檔案

.env.development 本地開發環境設定

NODE_ENV='development'

.env.production 正式環境設定

 NODE_ENV='production'

.env.staging 測試環境設定

NODE_ENV='production'

3.在src下面建立一個config資料夾下面設定三個相對應的的js

重新設定三個是因為修改起來方便，不需要重啟專案，符合開發習慣。

// 根據環境引入不同設定 process.env.NODE_ENV
const config = require('./env.' + process.env.NODE_ENV)
module.exports = config

設定對應環境的變數，拿本地環境檔案 env.development.js 舉例，使用者可以根據需求修改

// 本地環境設定
module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'http://localhost:9018', // 專案地址
  baseApi: 'https://test.xxx.com/api', // 本地api請求地址
  APPID: 'xxx',
  APPSECRET: 'xxx'
}

4.在我們根目錄下的src檔案內main.js檔案中引入

import {baseUrl} from "./config/index";
// 因為匯出的是一個物件，結構賦值
console.log(baseUrl);

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。