1: 配置 代理
1）命令行执行 npm config edit
2）在打开的记事本 添加如下代理：
electron_mirror=https://npmmirror.com/mirrors/electron/
registry=https://registry.npmmirror.com
注意 electron_mirror 的路径不是这个 https://registry.npmmirror.com/mirrors/electron/ ，这里卡了蛮久， 网上两种路径都有人写
2：下载 第三方插件到 指定位置：执行 npm run electron:build 打包， 根据命令行的错误提示的去下载要下载的包，下载到下文指定路径下
首次使用electron-builder打包时，会到github上去下载winCodeSign和nsis的二进制文件，由于网络问题经常失败。
解决方法：
1.直接下载对应版本winCodeSign和nsis到本地，比如我的版本是winCodeSign-2.6.0.7z和nsis-3.0.4.1.7z
2.下载后放于对应目录 windows: %LOCALAPPDATA%\electron-builder\Cache
3.在Cache目录下创建nsis和winCodeSign
4.将对应的压缩包拷贝到目录中去完整解压,最终效果如下：
完成之后再运行electron-builder是不是直接就打包完成了呢。 参考：https://www.cnblogs.com/DevFans/p/14402077.html
3：启动白屏的问题： 在 vue.config.js 下 添加 如下配置代码：publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
4： 如果安装了全局的 electron 和 electron-builder， 打包的时候 也会提示找不到，
需要在 package.json 的 devDependencies 里面再指定一次 如：版本号，是你全局安装时候的版本号
5： 在项目的根目录新建 index.js 文件，添加如下代码：
// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow,Menu } = require('electron')
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 启用 Node.js 集成
contextIsolation: false, // 禁用上下文隔离（Node.js 集成的一个选项）
webSecurity: false, // 禁用同源策略
contextIsolation: false,
session: {
cookies: true // 这行确保启用了cookie
}
},
icon: 'build/.icon-ico/icon.ico'//这里是自动生成的图标，默认情况下不需要改
})
// and load the index.html of the app.
mainWindow.loadFile('./dist/index.html')//如果要本地化，这样写，如果写远程的，那这里就是请求的域名
//隐藏顶部菜单
// mainWindow.setMenu(null);
// Open the DevTools.
// Open the DevTools.
//mainWindow.webContents.openDevTools()
mainWindow.maximize();//默认最大化
}
//设置中文菜单，默认是英文的
const createMenu = () => {
const template = [
{
label: '文件',
submenu: [
{
label: '退出',
accelerator: 'CmdOrCtrl+Q',
click: () => {
app.quit();
}
}
]
},
{
label: '查看',
submenu: [
{ label: '重新加载', accelerator: 'F5', role: 'reload' },
{ label: '全屏', accelerator: 'F11', role: 'togglefullscreen' },
{ label: '开发者工具', role: 'toggledevtools' }
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
createMenu()//菜单设置
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
6：package.json 添加 electron 编译和打包支持的配置项
{
"name": "task-manage",
"version": "0.1.0",
"author": "txh",
"description": "txh demo test",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service build && electron-builder",
"electron:serve": "electron ."
},
"build": {
"productName": "txhdemo",
"appId": "com.example.txhdemo",
"win": {
"icon": "favicon.ico"
},
"directories": {
"output": "build"
},
"files": [
"dist/**/*",
"index.js"
]
}
}
7： 运行截图：
