electron-vue 打包报错和功能的使用

以下呢是我个人在开发过程中遇到的问题以及一些功能的使用方法和打包报错进行的总结。

electron-vue 下载使用
1：npm install -g @vue/cli 安装vue-cli
2：vue init simulatedgreg/electron-vue my-project 创建electron-vue项目
3：cnpm install || npm install || yarn install 补全依赖
4：npm run dev 运行

一：
electron+vue+webpack 打包
在electron中使用element ui 的话，下载引入后还需要去添加一下，可以直接全局搜索 whiteListedModules
然后把 let whiteListedModules = [‘vue’] 改成let whiteListedModules = [‘vue’, ‘element-ui’] 即可

使用element ui 打包后图标不显示
在build 下utils.js文件中搜索 ExtractTextPlugin 在这个里面加入publicPath:‘…/…/’, 即可
return ExtractTextPlugin.extract({
use: loaders,
fallback: ‘vue-style-loader’,
publicPath:‘…/…/’,
})

二：
electron-vue 的图标必须是256x256的

三：
electron-vue 第一次打包肯定会报错
需要下载插件，（可能每个人需要下载的包都不一样，所以正常打包，等报错后看提示需要下载那个版本的electron包 ，实例： electron-v2.0.18-win32-x64.zip）需要找适合自己电脑的版本。
（1）：第一个插件包比较大可以去下面的github上面找对应的下载，（zip和txt）放到 C:\Users\（）\AppData\Local\electron\Cache
（https://github.com/electron/electron/releases） ：：：速度慢可以去淘宝镜像：https://registry.npmmirror.com/binary.html?path=electron/ 找对应的版本
（2）：后面的插件包比较小，稍等待就可。

四
electron-vue 如果打包报错乱码，是因为有中文路径的原因，如果去c盘改的话会比较麻烦，所以去项目里面的node_modules
（node_modules/app-builder-lib/out/targets/nsis/NsisTarget.js）
在这个js文件里搜索args 添加一行
args.push(“-INPUTCHARSET”, “UTF8”);
放到 const args = _this6.options.warningsAsErrors === false ? [] : [“-WX”]; 下面
可支持有中文路径。

五：
win.webContents.openDevTools(); //开启调试工具

六：
缩小到右下角图标问题
const iconPath = require(‘path’).join(__static, ‘/icon-13.png’);
const tray = new Tray(iconPath);
首先引入tray 和path 或者直接require(“path”) 把图标放到static下，按照上面的引入方式即可
注：因为打包后路径不一样，所以需要修改，正常引入的方式，打包后会找不到

七：Multispinner 报错，是因为没有下载。
在.electron-vue 的build.js文件中引入 并且需要下载 npm install -D
const Multispinner = require(‘multispinner’)

九
electron-vue 代理跨域问题设置。
在.electron-vue 的dev-runner.js中 搜索WebpackDevServer 函数
然后在这个函数中加入 proxy
const server = new WebpackDevServer(
compiler,
{
contentBase: path.join(__dirname, ‘…/’),
quiet: true,
hot: true,
proxy:{
context: () => true,
target: ‘’, //服务器地址，或者端口号
// secure: false,// 如果是https接口，需要配置这个参数
changeOrigin: true, // 设置允许跨域
}, //代理
before (app, ctx) {
app.use(hotMiddleware)
ctx.middleware.waitUntilValid(() => {
resolve()
})
}
}
)
十
electron下载慢
//https://cdn.npmmirror.com/binaries/electron/2.0.18/electron-v2.0.18-linux-x64.zip
https://registry.npmmirror.com/binary.html?path=electron/
使用淘宝镜像，换版本号即可

十一：
运行后报错误
TypeError: Object.fromEntries is not a function
at Object.eval

看提示的文件是哪个，例如我的是node_modules下webpack-hot-middleware 下client.js
需要把有使用Object.fromEntries 这个方法的直接注释，或者删除掉即可。
（2）：也可以直接全局查询Object.fromEntries 它去寻找，当然前提是可以搜索到

十二：
main.js中的一些用法
Menu.setApplicationMenu(null) //自带File,Edit……,默认为英文 隐藏

tray.setToolTip('xxx');  //设置名字  右下角托盘

click: () => {
return mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
} //显示/隐藏

十三：
electron-vue 项目启动需要安装 node17以下的版本

十四：electron-vue 主进程与渲染进程之间的通信/操作
1：主进程往渲染进程发送数据/操作
（1） main/index.js 中 mainWindow.webContents.send(‘b’, ‘bark’) // ‘b’ 方法名 //'bark’参数 --//发送
也可以 ipcMain.send(‘b’,‘bark’) 发送数据，用法不同，视情况而定。
　　　（2）vue页面 import { ipcRenderer } from “electron”; 引入 ipcRenderer --//接收
　　　 ipcRenderer.on(“b”, (e, data) => {
　　　 console.log(e, data); e 事件本身 data 传过来的值。
　　　 });

2：渲染进程往主进程发送数据/操作
（1）vue页面中引入 import { ipcRenderer } from “electron”; --//发送
ipcRenderer.send(“abc”，数据) abc=事件名
（2）main/index.js 中 import { ipcMain } from “electron”; --//接收
ipcMain.on(‘事件名’, (e, data) => {
// e 事件本身
// data 数据
})

十五：设置后台服务地址
.electron-vue下的dev-runner.js

十六：快捷键

  Ctrl+shift+I   调出调试工具f12
  Ctrl+shift+R/Ctrl+R       F5

十七：对electron-vue 升级版本>=10后页面报错不显示问题。
在main/index.js 中 BrowserWindow函数里面加上下面的代码
webPreferences: {
nodeIntegration: true, //在网页中集成Node
enableRemoteModule: true, // 打开remote模块
}, //大于等于10版本以上
或者
webPreferences: {
webSecurity: false,
nodeIntegration: true, // 在网页中集成Node
enableRemoteModule: true, // 打开remote模块
contextIsolation: false // 是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本
}, //到最新版本通用

十八：建议不要使用太新的 yarn 1.3.2 cnpm8.3.0 npm8.79.2 node16.17.0
注释：正在使用版本，正常。
十九：打包安装完后，禁止可以多次启动。
放在createWindow 下的
const gotTheLock = app.requestSingleInstanceLock(); //禁止启动多次，只打开一个窗口
if (!gotTheLock) {
app.quit();
}

二十：打包报错Error: Cannot find module ‘fs/promises’
可能是
1：cnpm 版本太高。
2：node版本太低。

二十一：全局使用主进程方法，可以
this.$electron.ipcRenderer.send 进行调用方法使用。

二十二：electron-vue 项目版本，因作者没有维护新插件等（需各个插件配套使用）。所以目前使用较新版本为 electron包 为11.5
所以 package.json 中， 以下四个的版本
“electron”: “^11.0.1”,
“electron-debug”: “^3.2.0”,
“electron-devtools-installer”: “^3.1.1”,
“electron-builder”: “^22.9.1”,

二十三：在主进程中销毁tray 需要单独写一个函数，调用即可。
function initTrayIcondes() {
tray.destroy();
tray = null;
}

二十四：
需要两个地方：设置打开开发者工具f12
1、src/main/index.dev.js中
require(‘electron-debug’)({ showDevTools: true }) true开false关
2、src/main/index.js中
mainWindow.webContents.openDevTools(); //开启调试工具

二十四：任务栏图标闪烁& 托盘图标闪烁&销毁清空
// const iconPath1 = require(“path”).join(__static, “/icon-1.png”);
// const iconPath2 = require(“path”).join(__static, “/icon-2.png”);
// // 先销毁
// clearInterval(timer_arr); //销毁
// tray.setImage(iconPath1);
// clearTimeout(meout_arr); //销毁

// let flagIcon = true;
// timer_arr = setInterval(() => {
// if (flagIcon) {
// tray.setImage(iconPath1);
// flagIcon = false;
// } else {
// tray.setImage(iconPath2);
// flagIcon = true;
// }
// }, 1000);

// // 任务栏闪烁
// meout_arr = setTimeout(() => {
// mainWindow.flashFrame(true); //任务栏闪烁
// }, 1000);

// //监听任务栏图标的点击事件
// tray.on(“click”, () => {
// mainWindow.show();

销毁清空
// clearInterval(timer_arr); //销毁
// tray.setImage(iconPath);
// clearTimeout(meout_arr); //销毁
// });
// //触发事件，点击任务栏可清空定时器
// mainWindow.on(“focus”, () => {
// clearTimeout(meout_arr); //销毁
// mainWindow.flashFrame(false);
// clearInterval(timer_arr); //销毁
// tray.setImage(iconPath);
// });

二十五：打开子窗口
childWindow = new BrowserWindow({
width: 400,
height: 400,
useContentSize: true,
webPreferences: {
nodeIntegration: true, //在网页中集成Node
enableRemoteModule: true, // 打开remote模块
},
});
childWindow.on(“closed”, () => {
childWindow = null;
});
childWindow.show();
childWindow.loadURL(winURL + “#/ceslist”);

二十六：electron-vue ReferenceError process is not defined问题
（1）找到目录下的webpack.renderer.config.js文件，找到这段代码：
new HtmlWebpackPlugin({
// …
})

替换为：
new HtmlWebpackPlugin({
filename: ‘index.html’,
template: path.resolve(__dirname, ‘…/src/index.ejs’),
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
nodeModules: process.env.NODE_ENV !== ‘production’
? path.resolve(__dirname, ‘…/node_modules’)
: false
}),

（2） 再找到该目录下的webpack.web.config.js文件，找到这段代码：
new HtmlWebpackPlugin({
// …
})

替换为：
new HtmlWebpackPlugin({
filename: ‘index.html’,
template: path.resolve(__dirname, ‘…/src/index.ejs’),
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: false
}),

二十七
打包报错 ：? Get https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.5.0/winCodeSign-2.5.0.7z:
当前项目中 配置.npmrc 文件 放入 electron-builder-binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

二十八：调用https服务

单向认证

// 忽略证书相关错误 在ready前使用 app.commandLine.appendSwitch(‘ignore-certificate-errors’)

双向认证
index.js中
module.exports = {
devServer: {
https: {
cert: fs.readFileSync(path.join(__dirname, ‘src/ssl/cert.crt’)),
key: fs.readFileSync(path.join(__dirname, ‘src/ssl/cert.key’))
}
}
}

–以上就是我在使用过程中暂时遇到的问题和使用的方法。
ps:(跟以前一样，有不清楚的可随时留意告诉我，看到后会一一答复。也欢迎大家一块探讨学习。)