编译打包后动态配置api请求baseurl

前几天，我们有个项目需要打包给客户，由客户自己部署。客户那边的后台地址还未定下来，我们又不想把前端源码给到他们，又不想一次次帮他们打包。鉴于此，项目经理提出在打包后修改后台地址的配置文件即可满足以上需求。

步骤：

• 在public/static下面新建一个config.js文件作为配置文件，具体内容如下：

window.g = {
  url: `http://xxxxxx.xxxx.com/manage/` // 配置服务器地址
}

这里将后台地址url注入到window对象的一个属性里面，也可以将其他配置注入到window对象中，并且可以自定义这些属性。

• 在index.html文件中引入config.js

<script src="./static/js/config.js"></script>

• 在项目中使用时，直接使用window.g去调用config.js文件中的内容。例如修改./utils/request.js的baseURL的参数

const G = window.g // 在static/js/config.js中可以动态的修改后台请求地址
// 创建axios实例
const service = axios.create({
  baseURL: G ? G.url : process.env.BASE_API, // api的base_url
  timeout: 150000, // 请求超时时间
  withCredentials: false, // 跨域
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

结果

npm run build后可以发现 ./dist/static/js/config.js就是上述我们配置的config.js文件。我们可以把编译好的前端工程交给部署人员去部署，部署人员可以直接通过修改config.js的内容来决定后台地址。

原理

webpack打包时，会将public/static下的静态文件原封不动的打包到build/static目录下 。