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

Posted 2022-09-23 luffy5459

        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。