解决elcetron打包后不能访问接口的问题

2021-09-07阅读(6421)评论(0)牵着狗狗看MM

苏州实时公交查询

如果用了vue-cli-plugin-electron-builder,这个打包工具

在打包后(即非本地开发环境的情况下),原本的接口请求地址全部变成了app://. 开头,如果你本地开发的时候配置了devServer的proxy,那么访问接口路径会变成app://./api/接口地址(假如代理了/api)
加载本地资源文件是没有任何问题。

网上有方案是通过session.defaultSession.webRequest.onBeforeRequest,来对request Url做重定向,这样的方案也不完美,请求中会存在一个URL重定向的过程,如果逻辑里需要同步,那就歇菜了。

 

最终解决方案

 

vue.config.js中不使用devServer(如果实在要用,那就根据当前是否是开发环境配置是否使用devServer,axios也需要加判断)

module.exports = {
    publicPath: '/',
    devServer: {},
...
}
axios实例化之前添加如下代码
axios.defaults.baseURL = process.env.VUE_APP_PROXY_TARGET  //根据环境变量设置不同的baseURL 

const instance = axios.create({// 实例化axios
    timeout: httpTimeout, // request timeout
})

就是这么简单!~

赞(1)
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 解决elcetron打包后不能访问接口的问题
分享到: 更多 (0)