# vue3_electron

**Repository Path**: gqz1989/vue3_electron

## Basic Information

- **Project Name**: vue3_electron
- **Description**: vue3_electron
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2022-01-05
- **Last Updated**: 2025-02-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3_electron

## 项目搭建

### 1.使用 vue cli 创建vue项目
```
vue create electron-test
```
### 2. 安装插件 vue-cli-plugin-electron-builder
```
vue add electron-builder
```
完成后package.json添加如下代码：
```
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
```
npm run electron:serve  electron开发模式

npm run electron:build   electron打包


## 踩到的坑

### electron+vue环境运行下出现__dirname is not defined报错解决方法
```
module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    }
}
```

### electron 解决require is not defined的问题
```
  const win = new BrowserWindow({
    ...
    webPreferences: {
      nodeIntegration: false,
      // 官网似乎说是默认false，但是这里必须设置contextIsolation
      contextIsolation: false,
      ...
    }
  })
  ...
}
```
### 导入electron.remote后，remote为undefined
```
win = new BrowserWindow({
	webPreferences: {
		nodeIntegration: true,  // 赋予此窗口页面中的JavaScript访问Node.js环境的能力
		// 在electron 10.0.0之后，remote模块默认关闭
		// 必须手动设置webPreferences中的enableRemoteModule为true之后才能使用
		enableRemoteModule: true,   // 打开remote模块
        ...
	}
});

```

### 无法close窗口
elecotrn bug 需要关闭调试窗口后才可以关闭窗体 https://github.com/electron/electron/issues/25012
```
if (remote.getCurrentWindow().isDevToolsOpened()) {
        remote.getCurrentWindow().closeDevTools();
}
remote.getCurrentWindow().close()
```

### ready-to-show不执行
1. show:true 会导致ready-to-show不执行
2. maximize:true 会导致ready-to-show不执行


### 参考
Vue2和Vue3开发组件有什么区别
https://zhuanlan.zhihu.com/p/139590941

web前端项目案例实战 
https://www.cnblogs.com/xiaoyan2017/p/14403820.html

electron node 版本不匹配的解决细节
https://www.jianshu.com/p/a8716674d473

Vue: Electron打包Vue项目后，首界面空白(electron:serve正常，electron:build异常)
https://blog.csdn.net/qq_40994260/article/details/107440478

web前端项目案例实战
https://www.cnblogs.com/xiaoyan2017/p/14449570.html

使用CSS3自定义属性实现换肤功能 
https://www.jianshu.com/p/ec9b20b55143

Vue Electron 插件支持自动更新服务 
https://zhuanlan.zhihu.com/p/76788039

Vue+Electron学习系列 (四) -- 自动更新进阶 
https://codeantenna.com/a/fcD0z9Cn9P

解决electron-builder打包时下载依赖慢的问题
https://www.jianshu.com/p/c5d48a58eeb3

vue3 组件传值之 props 与 attrs 的区别
https://www.cnblogs.com/JasmineHan/p/13685893.html

如何用Vue开发Electron桌面程序? 这篇就够了!
https://blog.51cto.com/u_15091660/2603989

手把手教你使用Electron5+vue-cli3开发跨平台桌面应用
https://zhuanlan.zhihu.com/p/75764907

基于vue3.0+electron新开窗口|Electron多开窗体|父子模态窗口
https://www.shangmayuan.com/a/deed60b68b804678a9d9f8f0.html

electron 打包_桌面端框架Electron使用问题整理和总结
https://blog.csdn.net/weixin_39607450/article/details/110647391

vue设置多个layout（页面公共内容布局）
https://www.cnblogs.com/duanzhenzhen/p/13045613.html

vue公共布局组件Layout引入
https://www.cnblogs.com/xiaochongchong/p/14933891.html

正确设置 ELECTRON_MIRROR ，加速下载 electron 预编译文件
https://newsn.net/say/electron-mirror.html

解决electron-builder打包时下载依赖慢的问题
https://www.azimiao.com/6208.html

在vue中使用electron的模块出现：Uncaught ReferenceError: __dirname is not defined
https://www.jianshu.com/p/8fd47f9e2e40

苏南大叔-electron
https://newsn.net/category/electron/

vue-cli-plugin-electron-builder 文档
https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/configuration.html#table-of-contents

electron踩坑系列之一(热键)
https://blog.csdn.net/weixin_45032957/article/details/116192518

Electron应用内更新（自更新）
https://www.jianshu.com/p/7366a634ef33

Electron-updater自升级方案总结
https://www.jianshu.com/p/a6ed9daa150e

Electron AutoUpdater自动更新问题
https://www.jianshu.com/p/1142cbf27327

腾讯手册
https://cloud.tencent.com/developer/doc/1070

记录Electron APP实现全量更新和热更新的开发过程
https://www.cnblogs.com/ShawnSDC/p/14169086.html

使用dart-sass替换node-sass 注意，如果使用vue开发的话需要用::v-deep代替/deep/和>>>来进行样式穿透，否则会报错。
https://www.mingdev.com/article/43cdbc73

vue项目中使用阿里iconfont图标
https://www.cnblogs.com/chinabin1993/p/8184296.html