cli3暴露api地址 vue_实现vue-cli3根据环境在打包时自动替换请求地址baseUrl

解决了一个项目在开发构建时的痛点。根据项目构建时的 env 不同，自动去替换请求的域名地址。

环境vue-cli 3.1.1

vue-admin-template 4.1.0

问题复现

目前的项目是基于 vue-admim-template 进行开发的。由于前后端都我一个人承包。所以环境分的很简单，一个本地开发环境，同时起 vue 项目和 django server。一个 vps 做线上环境。

问题出现在 vue 项目本地开发的时候 api 用的也是本地 django server 提供的 api。所以地址就是 127.0.0.1 。每次上到线上环境都要手动去修改每个 api 的地址。虽然可以使用搜索全局匹配替换，但还是感觉很难受，很蠢。

故，想办法在项目构建的时候去根据环境自动更换请求地址。

解决思路

进过一番查找，在 vue-admim-template 中的 /src/utils/requests.js 中发现创建的 axios 实例中 baseURL 引用的是 process.env.VUE_APP_BASE_API 。所以当打包时根据 env 判断环境然后改变 process.env.VUE_APP_BASE_API 就可以了。

const service = axios.create({

baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url

withCredentials: false, // send cookies when cross-domain requests

timeout: 5000 // request timeout

})

具体实现

在 src 目录下新建一个 setBaseUr