快捷導(dǎo)航

vue cli4下環(huán)境變量和模式示例詳解

更新時(shí)間：2020年04月09日 11:09:57 作者：大白能

這篇文章主要介紹了vue cli4環(huán)境變量和模式示例詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

官方文檔

環(huán)境變量

一個(gè)環(huán)境變量文件只包含環(huán)境變量的鍵值對(duì)：

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

注意：

NODE_ENV - 是 “development”、“production” 、"test"或者自定義的值。具體的值取決于應(yīng)用運(yùn)行的模式
BASE_URL - 會(huì)和 vue.config.js 中的 publicPath 選項(xiàng)相符，即你的應(yīng)用會(huì)部署到的基礎(chǔ)路徑
除了 NODE_ENV 和 BASE_URL，其他的環(huán)境變量必須以 VUE_APP_ 開(kāi)頭
項(xiàng)目中使用：process.env.環(huán)境變量名，eg：VUE_APP_BASE_URL

模式

模式是 Vue CLI 項(xiàng)目中一個(gè)重要的概念。默認(rèn)情況下，一個(gè) Vue CLI 項(xiàng)目有三個(gè)模式：

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

注意點(diǎn)：

一個(gè)模式可以包含多個(gè)環(huán)境變量
每個(gè)模式都會(huì)將環(huán)境變量中 NODE_ENV 的值設(shè)置為模式的名稱
可以通過(guò)為 .env 文件增加后綴來(lái)設(shè)置某個(gè)模式下特有的環(huán)境變量
為一個(gè)特定模式準(zhǔn)備的環(huán)境文件 (例如 .env.production) 將會(huì)比一般的環(huán)境文件 (例如 .env) 擁有更高的優(yōu)先級(jí)
此外，Vue CLI 啟動(dòng)時(shí)已經(jīng)存在的環(huán)境變量擁有最高優(yōu)先級(jí)，并不會(huì)被 .env 文件覆寫(xiě)

.env        # 在所有的環(huán)境中被載入
.env.local     # 在所有的環(huán)境中被載入，但會(huì)被 git 忽略
.env.[mode]     # 只在指定的模式中被載入，優(yōu)先級(jí)高于.env和.env.local
.env.[mode].local  # 只在指定的模式中被載入，但會(huì)被 git 忽略，優(yōu)先級(jí)高于.env和.env.local

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

創(chuàng)建development模式的環(huán)境變量文件，項(xiàng)目根目錄下新建.env.development文件

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

創(chuàng)建production模式的環(huán)境變量文件，項(xiàng)目根目錄下新建.env.production文件

NODE_ENV=production
VUE_APP_BASE_URL=/

在src目錄下main.js文件中使用環(huán)境變量

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

// 導(dǎo)入axios
import axios from 'axios'
// 設(shè)置請(qǐng)求根路徑，使用環(huán)境變量
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// axios攔截器
axios.interceptors.request.use(config => {
 // 為請(qǐng)求頭對(duì)象，添加Token驗(yàn)證的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)

運(yùn)行項(xiàng)目

npm run serve

例子：自定義模式

自定義一個(gè)fat模式

在項(xiàng)目根目錄下新建環(huán)境變量文件.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",
  // 這條命令是我自定義的，通過(guò)--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"
 }
}

運(yùn)行命令