# x-vue-electron-demo

**Repository Path**: lly09/x-vue-electron-demo

## Basic Information

- **Project Name**: x-vue-electron-demo
- **Description**: vue + electron 项目架构初始化
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-01-20
- **Last Updated**: 2021-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# x-vue-electron-demo

## @vue/cli4.x、electron9.x 项目搭建
```
1）初始化vue项目
  vue create x-vue-electron-demo
2）安装electron-builder
  vue add electron-builder // 若安装遇阻，可尝试在新命令行窗口中执行 yarn add -D electron-chromedriver 来解决
3）运行项目&打包项目
  yarn electron:serve
  yarn electron:build
```
## 通过浏览器链接唤起应用
```
1）app.setAsDefaultProtocolClient([协议名称])
本质是在 HKEY_CLASSES_ROOT\[协议名称]\shell\open\command 下创建一个字符串值，内容为 "E:\[程序路径]\[程序名称].exe" "%1"
2）在 package.json 中的 build 中增加协议相关设置，与 Vue-Cli4.x 配合时，该设置应写在 vue.config.js 的 pluginOptions/electronBuilder/builderOptions 中
protocols: [{ name: 'xue5hen://', schemes: [ 'irc', 'ircs' ] }]
```
## 更改程序图标
```
1）准备两个icon：favicon.icns、favicon.ico，大小须为 256×256
2）在 package.json 中配置 win 和 mac 字段
  win: { icon: 'public/favicon.ico' }
  mac: { icon: 'public/favicon.icns' }
```

## 常见问题
### fs.existsSync is not a function
```
// 问题描述
使用 vue-cli-plugin-electron-builder 创建 electron 项目，在渲染进程中 require('electron') 会报错：fs.existsSync is not a function

// 解决办法
1）渲染进程中引入模块，改成使用 window.require 引入
const electron = window.require('electron')
2）主进程中，加上 nodeIntegration: true
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
```

### 单例模式下尝试多开，会提示“**已停止”
```
1）用 app.exit() 替代 app.quit()
```

### Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT
```
在 background.js 中将安装 Vue Devtools 的相关逻辑注释掉即可。
```

### 设置了 maximizable 为 true，但窗口的最大化按钮为灰色不可用状态
```
须要将窗口的 resizable 属性设置为 true。
```

```
1）unable to verify the first certificate
  在环境变量中增加 NODE_TLS_REJECT_UNAUTHORIZED=0
C:\Users\[用户名]\AppData\Local\electron\Cache
C:\Users\[用户名]\AppData\Local\electron-builder\Cache\winCodeSign
C:\Users\[用户名]\AppData\Local\electron-builder\Cache\nsis
electron下载地址
https://github.com/electron/electron/releases
winCodeSign、nsis下载地址
https://github.com/electron-userland/electron-builder-binaries/releases
```