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

这篇具有很好参考价值的文章主要介绍了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}。文章来源地址https://www.toymoban.com/news/detail-543198.html

到了这里，关于electron项目打包之后显示空白页面以及发送http请求地址错误的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！