vue动态修改打包后的请求路径

需求分析

我们需要在打完dist包以后,去通过打包生成后的index.html去配置它的请求路径,可以解决前端反复打包测试环境和生产环境的问题,也可以解决动态配置请求路劲的问题,我们可以通过后台去动态的修改我们打包好的请求地址

具体实现

我们需要在vue的public页面中将这个地址挂载到window对象上。
vue动态修改打包后的请求路径
因为打包后我们的public文件夹不会进行webpack的解析,所以等打完包后我们就可以去修改这个你挂载的值。
vue动态修改打包后的请求路径
我们直接在这个将你window对象的值赋值给你axios的baseUrl,我这里是做了一个拆分,你也可以直接挂载到Vue.axios.defaults.baseURL vue动态修改打包后的请求路径
最后直接正常打包就行,最后就去修改一下你public中的url看看可以不可以修改。

结束语

如果你对我的文章不理解的话,那么请参考vue-cli打包后动态配置后台地址

最后我再总结一下步骤:

  1. 在你的piblic下的index.html 的script 标签中挂载将url挂载到window对象上
  2. 在你的axios请求的地方使用它