关于vue项目如何配置不同域名

概要

环境变量process.env的随笔记录。因为公司基于vue+element 的后台管理系统需要配合小程序端增加新的需求。而小程序端的接口域名和原来的不是同一个，即：同个项目添加不同的域名

说明

ENV = 'pre' //所有环境被载入
VUE_APP_ENV = 'local' //对应的环境  local本地开发环境
# base api
VUE_APP_BASE_API = '/dev-api' //环境api配置
VUE_APP_BASE_URL = 'https://.baidu.com/api/' //第一个域名
VUE_APP_MKT_URL = 'https://baidu2.com/api/' //第二个域名
//当然也可以加第三个第四个，只要是已VUE_APP_xxx_URL 命名即可

这些文件是项目中针对不同环境设立的不同配置

**

在对应的request文件中获取配置的环境变量

**
项目创建之初会有对应的request.js文件，如果需要添加多个域名，可以再创建一个新的request_xxx.js文件。

// 创建一个axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_MKT_URL, // 这个就是拿到配置的第二个域名，然后在请求时，接口前缀域名会替换成这个。当然，到这一步还不行，还需要继续下一步
  timeout: 5000 // request timeout
})

在对应的API文件中引入配置的第二个域名

vue项目中的src–api 默认是存放所有请求接口的地方
在这个文件夹里新建一个api.js文件，用来存放使用第二个域名的接口

接下来是最后一步，否则无法达到预期目标

重新启动项目

小结

第一次接触同项目多域名配置，以前也没有详细的了解process.env相应配置，趁着这个机会，在这里做个记录。

参考链接：
好像懂又好像不懂的环境变量process.env
vue 不同环境的baseurl配置-环境变量