electron项目打包之后显示空白页面以及发送http请求地址错误

        electron项目在开发阶段,因为使用webpack脚手架,启用了webServer提供的http服务,所以有路由功能,当我们运行npm run electron:serve的时候,最后可以直接加载http://localhost:8080。在app里面就可以显示页面。

    当electron项目打包之后,成为桌面程序,这个时候就没有http服务支撑,所以加载的是静态页面,win.loadURL("app://./index.html")。

    这个首页因为没有http服务支撑,所以没有路由功能,最终无法显示。解决办法有两个,一个是改变路由设置模式,将mode:'history',改为mode:'hash'。就是修改router/index.js。

    还有一种办法就是配置一个 {path:"*",component:()=>import('首页.vue')}的路由。

    前面说了,桌面程序启动,并没有http服务,所以当发送ajax请求给其他url请求时,就没有所谓的baseURL指向某一个http://ip:port的url前缀,最后这个请求就会变为app:///api/xxx。为什么在开发阶段是可以的,因为开发阶段有本地http服务,而且有代理,所以不会出现请求地址错误,更不会出现跨域问题。

    这个问题的解决,1、修改请求时的url,给一个全路径url( http://ip:port/api/xxx ),而不是相对url( /api/xxx )。最后请求会正确发出去,但是另一个问题来了,就是跨域。默认electron安全策略是不支持跨域的。为了解决这个问题,我们需要自己设置忽略安全策略。2、在background.js中设置webPreferences:{webSecurity:false}。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

luffy5459

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值