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

官方文檔

環(huán)境變量

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

NODE_ENV=developmentVUE_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_ 開頭 項(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è)置為模式的名稱 可以通過為 .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 文件覆寫

.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=developmentVUE_APP_BASE_URL=http://127.0.0.1:8080/

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

NODE_ENV=productionVUE_APP_BASE_URL=/

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

import Vue from ’vue’import App from ’./App.vue’// 導(dǎo)入axiosimport 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})// 掛載到vueVue.prototype.$http = axiosVue.config.productionTip = falsenew 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=fatVUE_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' }}

運(yùn)行命令

npm run fat

這時(shí)候項(xiàng)目中讀取的，就是fat模式下的環(huán)境變量了

到此這篇關(guān)于vue cli4下環(huán)境變量和模式示例詳解的文章就介紹到這了,更多相關(guān)vue cli4環(huán)境變量和模式內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！