本文介紹了vue cli4下環境變數和模式示例詳解，分享給大家，具體如下：

官方文件

環境變數

一個環境變數檔案只包含環境變數的鍵值對：

NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/

注意：

• NODE_ENV - 是 “development”、“production” 、"test"或者自定義的值。具體的值取決於應用執行的模式
• BASE_URL - 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑
• 除了 NODE_ENV 和 BASE_URL，其他的環境變數必須以 VUE_APP_ 開頭
• 專案中使用：process.env.環境變數名，eg：VUE_APP_BASE_URL

模式

模式是 Vue CLI 專案中一個重要的概念。預設情況下，一個 Vue CLI 專案有三個模式：

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

注意點：

• 一個模式可以包含多個環境變數
• 每個模式都會將環境變數中 NODE_ENV 的值設定為模式的名稱
• 可以通過為 .env 檔案增加字尾來設定某個模式下特有的環境變數
• 為一個特定模式準備的環境檔案 (例如 .env.production) 將會比一般的環境檔案 (例如 .env) 擁有更高的優先順序
• 此外，Vue CLI 啟動時已經存在的環境變數擁有最高優先順序，並不會被 .env 檔案覆寫

.env        # 在所有的環境中被載入
.env.local     # 在所有的環境中被載入，但會被 git 忽略
.env.[mode]     # 只在指定的模式中被載入，優先順序高於.env和.env.local
.env.[mode].local  # 只在指定的模式中被載入，但會被 git 忽略，優先順序高於.env和.env.local

例子：不同模式下，為axios指定不同的baseUrl

建立development模式的環境變數檔案，專案根目錄下新建.env.development檔案

NODE_ENV=development
VUE_APP_BASE_URL=http://127.0.0.1:8080/

建立production模式的環境變數檔案，專案根目錄下新建.env.production檔案

NODE_ENV=production
VUE_APP_BASE_URL=/

在src目錄下main.js檔案中使用環境變數

import Vue from 'vue'
import App from './App.vue'

// 匯入axios
import axios from 'axios'
// 設定請求根路徑，使用環境變數
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// axios攔截器
axios.interceptors.request.use(config => {
 // 為請求頭物件，新增Token驗證的Authorization欄位
 config.headers.Authorization = window.sessionStorage.getItem('token')
 // 在最後必須return config
 return config
})
// 掛載到vue
Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
 router,render: h => h(App)
}).$mount('#app')

也可以在其他vue元件中列印

console.log(process.env.NODE_ENV)
console.log(process.env.VUE_APP_BASE_URL)
console.log(this.$http.defaults.baseURL)

執行專案

npm run serve

例子：自定義模式

自定義一個fat模式

在專案根目錄下新建環境變數檔案.env.fat

NODE_ENV=fat
VUE_APP_BASE_URL=http://fat.com/

根目錄下package.json中新增指令碼命令

{
 "name": "vue_shop","version": "0.1.0","private": true,"scripts": {
  "serve": "vue-cli-service serve","build": "vue-cli-service build",// 這條命令是我自定義的，通過--mode指定模式為fat
  "fat": "vue-cli-service serve --mode fat","lint": "vue-cli-service lint"
 },"dependencies": {
  "axios": "^0.19.2","core-js": "^3.4.4","echarts": "^4.6.0","element-ui": "^2.4.5","vue": "^2.6.10","vue-router": "^3.1.3"
 },"devDependencies": {
  "@vue/cli-plugin-babel": "^4.1.0","@vue/cli-plugin-eslint": "^4.1.0","@vue/cli-plugin-router": "^4.1.0","@vue/cli-service": "^4.1.0","@vue/eslint-config-standard": "^4.0.0","babel-eslint": "^10.0.3","babel-plugin-component": "^1.1.1","eslint": "^5.16.0","eslint-plugin-vue": "^5.0.0","less": "^3.10.3","less-loader": "^5.0.0","vue-cli-plugin-element": "^1.0.1","vue-template-compiler": "^2.6.10"
 }
}

執行命令

npm run fat

這時候專案中讀取的，就是fat模式下的環境變量了

到此這篇關於vue cli4下環境變數和模式示例詳解的文章就介紹到這了,更多相關vue cli4環境變數和模式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！