由于我们的项目需要在不同环境下进行运行(开发,生产,测试等),这避免我们需要多次的去切换请求的地址以及相关的配置,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"
当需要用到该变量是可以用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>