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 目录下新建一个 setBaseUrl.js 文件

module.exports = () => {

let baseUrl = ""

switch(process.env.NODE_ENV) {

case 'development':

baseUrl = 'http://127.0.0.1:8000/'

break

case 'production':

baseUrl = 'http://yourip:8080/'

break

}

return baseUrl

}

然后在 vue.config.js 中引入, 执行并赋值给 process.env.VUE_APP_BASE_API

const baseUrl = require('./src/setBaseUrl.js')

process.env.VUE_APP_BASE_API = baseUrl()

最后将原先请求方法中的 api 地址中的域名以及端口移除，只保留请求路径即可。

本文参考