electron vite搭建项目

### electron 架构组成

electron内部集成了两个运行环境：

    NodeJs环境：称为主进程（Main Process）

    Chromium环境：称为渲染进程（Renderer Process）

可以理解成在主进程中就是在写NodeJs代码，在渲染进程中是在写网页相关的代码（如HTML、CSS、JavaScript等）。

主进程对应的代码文件是main.js以及将来通过require导入到main.js中的模块。

渲染进程对应的文件是index.html以及将来通过link、script、img引入到页面中的代码或资源


electron文档：https://www.electronjs.org/zh/

electron生命周期API：https://www.electronjs.org/zh/docs/latest/api/app （app内所有事件都是生命周期钩子）

### electron 导包代理

npm 淘宝镜像

```shell

npm config set registry "https://registry.npmmirror.com"

```

electron 淘宝镜像

```shell

npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"

```

### 创建electron项目

#### 旧版（electron-vue）：

1.安装脚手架

```shell

npm install -g @vue/cli

```

2.创建样板代码

```shell

vue init simulatedgreg/electron-vue my-project

```

3.进入项目目录

```shell

cd my-project

```

4.安装依赖

```shell

yarn # 或者 npm install

```

5.运行程序

```shell

yarn dev # 或者 npm run dev

```

#### 新版（Vue CLI Plugin Electron Builder）：

1.安装Vue脚手架

```shell

npm install -g @vue/cli #或 yarn global add @vue/cli

```

2.创建项目

```shell

vue create myproject

```

3.进入项目目录

```shell

cd myproject

```

4.调用vue-cli-plugin-electron-builder的生成器：

```shell

vue add electron-builder

```

5.启动

```shell

yarn electron:serve #或 npm run electron:serve

```

 

#### vite脚手架（可能会有一些打包白屏问题）：

1.创建项目

```shell

npm init vite@latest #或 yarn create vite

```

2.进入项目目录

```shell

cd myproject

```

3.导入electron和vite插件

```shell

npm install electron -D

npm install vite-plugin-electron -D

```

4.修改vite.config.js

```js

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import electron from 'vite-plugin-electron'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue(), electron({

      entry: "electron/index.js"

  })]

})

```

5.创建electron/index.js（注意使用require引入）

```js

const { app, BrowserWindow } = require('electron')

const path = require('path')

//app 控制应用程序的事件生命周期。

//BrowserWindow 创建并控制浏览器窗口。

let win;

//定义全局变量获取 窗口实例

const createWindow = () => {

    win = new BrowserWindow({

        //

        webPreferences: {

            devTools: true,

            contextIsolation: false,

            nodeIntegration: true

            //允许html页面上的javascipt代码访问nodejs 环境api代码的能力（与node集成的意思）

        },

    webContents: {

      openDevTools: true

    }

    })

    if (app.isPackaged) {

        win.loadFile(path.join(__dirname, "../index.html"));

    } else {

//VITE_DEV_SERVER_HOST 如果是undefined 换成  VITE_DEV_SERVER_HOSTNAME

        win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)

    }

}

//isPackage 不好使换下面的

  //  if(process.env.NODE_ENV != 'development'){

      //  win.loadFile(path.join(__dirname, "../index.html"));

  //  }else{

        //win.loadURL(`http://${process.env['VITE_DEV_SERVER_HOSTNAME']}:${process.env['VITE_DEV_SE//RVER_PORT']}`)

   // }

//在Electron完成初始化时被触发

app.whenReady().then(createWindow)

```

6.配置package json，去掉type字段，增加main字段（指向electron的创建窗口js文件）

```json

{

  "name": "electron-vite",

  "private": true,

  "version": "0.0.0",

  "main": "electron/index.js",

  "scripts": {

    "dev": "vite",

    "build": "vue-tsc --noEmit && vite build  &&  electron-builder",

    "preview": "vite preview"

  },

  "dependencies": {

    "vue": "^3.2.37"

  },

  "devDependencies": {

    "@vitejs/plugin-vue": "^3.0.0",

    "electron": "^19.0.10",

    "electron-builder": "^23.1.0",

    "typescript": "^4.6.4",

    "vite": "^3.0.0",

    "vite-plugin-electron": "^0.8.3",

    "vue-tsc": "^0.38.4"

  }

}

```

7.运行

```shell

npm run dev

```

#### 使用模板直接创建 推荐（electron+vite，可根据需要创建vue、react、ts项目）

1.引导式创建项目

```shell

npm create @quick-start/electron

```

2.导包

```shell

npm i

```

3.开启热更新

启动项目后修改渲染进程会自动启用了 HMR，即自动刷新页面，但要主进程进行热重载（重启项目）需要添加 --watch  参数。

package.json

```json

{

  ...

  "scripts": {

    "dev": "electron-vite dev --watch",

  }

  ...

}

```

4.运行

```shell

npm run dev

```

5.项目目录

使用 electron-vite 创建的 Vue 项目，已经规划好了目录的结构，重点来看 `src` 目录：

```

├──build

├──src/

│  ├──main

│  ├──preload

│  └──renderer

├──electron.vite.config.js

└──package.json

```

- `main` 目录对应的是主进程的代码

- `renderer` 目录对应的是渲染进程的代码，即 Vue 的组件

- `preload` 目录对应的是预加脚本的代码

6.一些基础操作

6-1. 设置标题栏

```javascript

// src/main/index.js

// ...

function createWindow() {

  new BroswerWindow({

    // ...

    titleBarStyle: "hidden",

    titleBarOverlay: true,

    // ...

  });

}

```

6-2. 获取平台名称

```javascript

// src/proload/index.js

import { contextBridge } from "electron";

// 暴露一些属性或方法

contextBridge.exposeInMainWorld("electronAPI", {

  platform: process.platform,

});

```

6-3. 将静态模板整合到项目中

    - 将原来的 `assets` 目录替换掉

    - 将 html 结构放到 `App.vue` 的 `template` 中

    - 将 `style.css` 重命名为 `style.less` 导入到 `App.vue` 的 `style` 中

注：由于安全的策略限制在打包应用时字体图标无法正常工作，需要在 `index.html` 做以下调整：

```html

<!-- src/index.html -->

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Electron</title>

    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->

    <meta

      http-equiv="Content-Security-Policy"

      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self' data:"

    />

  </head>

  <body>

    <div id="app"></div>

    <script type="module" src="/src/main.js"></script>

  </body>

</html>

```

7.打包

```shell

npm run build:win # 或 npm run build:mac  npm run build:linux

```