从零开发Electron-Vue (二)

最新推荐文章于 2025-01-25 08:00:00 发布

原创最新推荐文章于 2025-01-25 08:00:00 发布 · 530 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#electron #vue #node.js #javascript #axios

electron框架专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Electron程序中设置默认编辑框大小、使用内置浏览器打开链接、关闭开发者模式，以及处理axios跨域和网络请求限制。还探讨了axios在不同库间的切换及其在 Electron 环境中的特定问题。

下面举例解决实际中碰到的问题

electron程序无默认的编辑框，修改应用程序框的大小

mainWindow = new BrowserWindow({ 
    width: 1200,
    height: 768,
    useContentSize: true,
    frame: false,
    webPreferences: {
      nativeWindowOpen: true
    }
  })

如何打开电脑的默认浏览器，打开自带的浏览器

电脑的默认浏览器：

const shell = require('electron').shell;
shell.openExternal('http://www.baidu.com');

自带的浏览器

window.open('https://github.com', '_blank', 'nodeIntegration=no')

打开程序默认关闭开发者模式

mainWindow.loadURL(winURL)
mainWindow.webContents.closeDevTools();

electron使用axios请求网络后台跨域

使用electron-vue，安装的时候会提示是否安装axios库，如果选择了是的话，会在main.js里面找到下面的代码

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios

那么使用它

this.$http.get('http://www.baidu.com')
        .catch(function (error) {
          console.log(error);
        })
        .then(function (response) {
            console.log(response);
        });

如果跨域，添加如下代码

new BrowserWindow({
    webPreferences: {
      webSecurity : false, //禁用同源策略
    }
  })

electron下使用axios网络请求错误的问题Requests are immediately canceled when ran in Electron

最终通过在请求之前加上一行

axios.defaults.adapter = require('axios/lib/adapters/http');或axios.defaults.adapter = require('axios/lib/adapters/xhr');

后来通过看axios的源码之后了解了原理，原来axios是可以使用node的http.js或者xhr.js作为请求的依赖库的，默认使用的是xhr.js，但是在electron中，最开始的时候是不能访问网络的，使用http.js却可以，同样的网络环境同样的配置什么什么全都一样，就是有这个问题也不知道是为什么，后来就莫名其妙的自己好了，什么也没改……但是其实这里还有一个问题，就是axios有一个下载进度的功能，也就是配置项里的onDownloadProgress项，这在使用http.js库的时候是无效的，因为http.js库本身也没有实现下载进度，但是xhr.js实现了，所以在默认的xhr.js中是可以实现下载进度的，可以使用onDownloadProgress项配置下载进度的回调函数。