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

官方文檔

環境變量

一個環境變量文件只包含環境變量的鍵值對：

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

創建production模式的環境變量文件，項目根目錄下新建.env.production文件

NODE_ENV=productionVUE_APP_BASE_URL=/

在src目錄下main.js文件中使用環境變量

import Vue from ’vue’import App from ’./App.vue’// 導入axiosimport 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})// 掛載到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)

運行項目

npm run serve

例子：自定義模式

自定義一個fat模式

在項目根目錄下新建環境變量文件.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' }}

運行命令

npm run fat

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

到此這篇關于vue cli4下環境變量和模式示例詳解的文章就介紹到這了,更多相關vue cli4環境變量和模式內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！