最近开发electron-vue的时候遇到一个坑

于是到网上一顿找

但根据每个人的写法或用的框架不一致

导致网上的资料不是正确的

最终结果是也没找到解决方案

就像在平坦的柏油路上奔驰

一个小坑会让你措不及防而翻车

坑1、在vue-cli创建的electron项目中，dev环境下用axios访问接口跨域问题

这个问题好解决

在vue.config.js配置中写入如下代码

module.exports = {// 第三方插件配置pluginOptions: {electronBuilder: {builderOptions: {"win": { //win相关配置"icon": "./public/logo.ico", //图标，当前图标在根目录下，注意这里有两个坑"target": [{"target": "nsis", //利用nsis制作安装程序"arch": ["x64", //64位]}]},"mac": {"icon": "./public/inv_tool.ico"},"nsis": {"oneClick": false, // 是否一键安装"allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。"allowToChangeInstallationDirectory": true, // 允许修改安装目录"installerIcon": "./public/logo.ico", // 安装图标"uninstallerIcon": "./public/logo.ico", //卸载图标"installerHeaderIcon": "./public/logo.ico", // 安装时头部图标"createDesktopShortcut": true, // 创建桌面图标"createStartMenuShortcut": true, // 创建开始菜单图标"shortcutName": "AppDemo", // 图标名称},}}},lintOnSave: false,devServer: {host: '0.0.0.0',port: 8080,hotOnly: true, // 热加载proxy: { //配置跨域'/apiUrl': {target: 'http://118.192.93.6:8080/tool',ws: true,changOrigin: true, //允许跨域pathRewrite: {'^/apiUrl': ''}}}},}

注意打包的ico文件要用256*256的

其中nsis可根据项目需求自行选择要不要安装配置选择

如果不需要他自带的安装程序包，要自定义好看安装程序包

可以去看我的文章《关于客户端自定义安装界面开发分享》

以上是解决dev环境下访问接口跨域问题的解决方案

坑2、在npm run electron:build之后，运行程序，所有的访问接口Request URL

都会变成file:///D:xxx/xxx/正确的应该是http://xxx或者https://xxx

是因为electron中设置了win.loadURL访问了本地index.html文件导致

if (process.env.WEBPACK_DEV_SERVER_URL) {// dev环境win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)win.webContents.openDevTools()} else {// 打包环境createProtocol('app')win.loadURL(`file://${__dirname}/index.html`);}

这个问题解决办法挺low的，但是很实用

在vue的main.js中写入下面一段代码

Vue.prototype.$api = "http://118.192.93.6:8080/tool";

在axios请求中直接写成

_this.$axios('post',_this.$api+'/login',data.then(data => {  ......})

然后你会发现打包完就可以访问了，但dev环境下缺少了proxy代理，这样也不行啊

所以最终结果写成这样就可以解决问题了

Vue.prototype.$api = process.env.NODE_ENV == 'development' ? "/invoice" : "http://116.196.95.4:8080/tool";

以上内容亲测有效

如果帮助你解决了问题

请点赞

收藏

转发喔

感谢支持！