vue项目用electron转pc端应用

vue项目用electron转pc端应用

最近的项目是使用nginx反向代理部署前端的，现在需要用electron将vue项目转为pc端应用。在打包的过程中碰到一些问题，分享一下。
首先是打包过程：

一、添加electron-builder

在项目终端中运行

 vue add electron-builder

二、窗体运行

运行electron窗体：

npm run electron:serve

此时应该就可以正常显示窗口了。

三、打包exe

运行打包命令

npm run electron:build

如果打包过程中出现如下错误：

需要自己手动下载nsis与winCodeSign，下载地址参考这篇文章：https://blog.csdn.net/xi1213/article/details/123157780
将nsis与winCodeSign复制(替换)到以下目录：

复制文件后再次运行打包命令，打包成功后会出现一个dist_electron文件夹，运行里面的exe即可，此exe需安装后使用：

四、白屏

打包成功运行后，会出现白屏情况，这是由于vue与electron路由模式的原因，vue一般默认history模式。

需要在router的index.js中修改：
从vue-router中引入createWebHashHistory，将createWebHistory(process.env.BASE_URL)改为createWebHashHistory(process.env.BASE_URL)。

删除项目中的dist_electron，重新运行打包命令，就可以成功打开exe了

改变图标

在vue.config.js中添加以下代码

注意：图标必须是ico格式，可以直接百度搜索png转ico图片转换，建议选择转成256*256大小

其他配置

隐藏菜单栏

在background.js（或者你的叫main.js，总之就是入口文件）中添加以下代码

fullscreen:true //默认全屏打开

默认打开最大化

修改左上角项目名称

在public中的index.html修改title名称

修改应用程序名称

在vue.config.js中添加productName，这里可以是中文

在package.json中的name也可以控制应用程序的名字，但是以productName优先，注意package.json中的name不能为中文

手动调出控制台

首先在background.js中引入快捷键组件

注册自定义快捷键（control+shift+i快捷键打开控制台）

遇到的bug

一、项目中的pdf不显示，原来的pdf是直接放在public/static文件夹下的，应该是在background.js中的win.loadURL路径有问题，原来是默认的

win.loadURL('app://./index.html')

改为以下代码就可以成功访问到pdf了，然后就会出现第二个问题

win.loadURL(`file://${__dirname}/index.html`)

二、electron打包vue项目后，在electron：serve环境下是正常运行的，但是build之后请求不到后端接口

原因：electron+vue打包是不支持反向代理解决跨域的，在vue.config.js中配置的代理是devServe，意思就是只在开发环境中生效，打包之后代理就不会触发了。

解决方法：尝试在每一次请求后端接口时都补齐url地址，在axios中配置baseURL:“http://localhost:端口号”

这里的baseurl需要对应后端服务器的端口号。

build之后虽然访问地址是正确的，但是并不能访问到后端，报错信息类似以下截图

猜测应该是后端设置跨域问题，然后要后端在请求头中设置了cors跨域

解决方式：

在封装axios文件中将baseURL配置成例如"http:127.0.0.1:9090"（这里按照个人具体情况更改）,这里的9090端口就是后端已经定死的。

axiosInstance代码如下：

import axios from 'axios'
const axiosInstance =axios.create({
    baseURL:'http:127.0.0.1:9090',
    timeout:5000
})
export default axiosInstance

然后在把接口请求改为baseURl+/xxxx（接口地址）

我们在vue.config.js中配置的devServe是在开发环境使用的，当build之后变成生产环境proxy自然不生效。以下proxy中的代理/api就是http:127.0.0.1:9090。

原来的vue.config.js中的proxy配置：

proxy:{
    '/api':{
        target:'http:localhost:9090',
            changeOrigin:true,
                pathRewrite:{
                    '^/api':''
                }
    }
}

原来的请求：

axios.get("/api/system/SailInfo/SailData").then((res)=>{
    .....
})

所以在请求时需要把原来的api去掉，如下

axiosInstance.get("/system/SailInfo/SailData").then((res)=>{
    ....
})

截至到这里，已经可以正常访问到后端接口了

参考文章：
1、http://t.csdn.cn/jyGjd

2、http://t.csdn.cn/TG2gk

3、https://segmentfault.com/q/1010000043038902

4、https://blog.csdn.net/qq_41579104/article/details/107340431