前幾天Vue3.0正式發布，也說明了Vue3.0后面不會再有大規模改動，大家可以開始系統性學習了，雖然目前大多數公司使用的還是Vue2.0，但這只是一個過渡階段，Vue3.0經歷了兩年的開發，在去年Vue2.0也引入了Vue3.0體驗組件，后面基本是新專案肯定會使用Vue3.0，Vue2.0到Vue3.0變化還是蠻大的，今天就一起學一下vue-cli4/vue-cil3和vue-cli2在全域地址.env上的使用吧，
由于我們的專案需要在不同環境下進行運行(開發，生產，測驗等)，這避免我們需要多次的去切換請求的地址以及相關的配置，vue-cli2是可以直接在config檔案中進行配置的，但是vue-cli4和vue-cli3已經簡化了，沒有config檔案怎么辦？
一、建立.env系列檔案
首先我們在根目錄新建3個檔案，分別為.env.development，.env.production，.env.test
注意檔案是只有后綴的，
.env.development 模式用于serve，開發環境，就是開始環境的時候會參考這個檔案里面的配置
.env.production模式用于build，線上環境，
.env.test 測驗環境
二、修改檔案
分別在檔案內寫上：
1.開發環境
//.env.development
VUE_APP_BASE_API = '需要請求API'
2.線上環境
//.env.production
VUE_APP_BASE_API = '需要請求API'
3.測驗環境
//.env.test
VUE_APP_BASE_API = '需要請求API'
三、更改package.json檔案
"scripts": {
"dev": "vue-cli-service serve",
"test": "vue-cli-service serve --mode test",
"build": "vue-cli-service build",
"build:test": "vue-cli-service build --mode test",
"lint": "vue-cli-service lint"
},
四、使用
當需要用到該變數是可以用process.env.VUE_APP_BASE_API進行取值，
例如：
在js檔案中直接使用
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 10000,
})
1.Vue2.0頁面寫法
通過data定義
<template>
<div>
<a :href="this.uploadUrl">點擊</a>
</div>
</template>
<script>
export default {
data() {
return {
uploadUrl: process.env.VUE_APP_BASE_API,
}
}
}
</script>
<style scoped>
</style>
使用computed()
<template>
<div>
<a :href="VUE_APP_BASE_API">點擊</a>
</div>
</template>
<script>
export default {
computed: {
VUE_APP_BASE_API(){
return process.env.VUE_APP_BASE_API
}
}
}
</script>
<style scoped>
</style>
2.Vue3.0頁面寫法
Vue3.0使用setup()的一個寫法
<template>
<div>
<a :href="uploadUrl">點擊</a>
</div>
</template>
<script>
export default {
setup() {
return {
uploadUrl:'process.env.VUE_APP_BASE_API'
}
}
}
</script>
<style scoped>
</style>
或使用computed()
<template>
<div>
<a :href="VUE_APP_BASE_API">點擊</a>
</div>
</template>
<script>
import { computed } from 'vue'
export default {
setup() {
const VUE_APP_BASE_API = computed(()=>{
return process.env.VUE_APP_BASE_API
})
return {
VUE_APP_BASE_API
}
}
}
</script>
<style scoped>
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/142714.html
標籤：其他