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>