前端设计

process.env.VUE_APP_BASE_API

2023-11-07

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