vue-cli4/vue-cil3使用process.env.VUE_APP_BASE_API全域性地址代替vue-cli2的process.env.BASE_API

前幾天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>