溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了vue cli4下環境變量和模式的用法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
環境變量
一個環境變量文件只包含環境變量的鍵值對：
NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/
注意：
模式
模式是 Vue CLI 項目中一個重要的概念。默認情況下，一個 Vue CLI 項目有三個模式：
注意點：
.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下環境變量和模式的用法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
