更新时间 20210823
注意：electron 很难很难很难 安装，有梯子最好

1、配置yarn

#yarn 配置方法
yarn config set registry https://registry.npm.taobao.org/
yarn config set ELECTRON_BUILDER_BINARIES_MIRROR http://npm.taobao.org/mirrors/electron-builder-binaries/
yarn config set electron_mirror https://cdn.npm.taobao.org/dist/electron/

#文件配置方法
进入文件路径  C:\Users\用户名\.yarnrc
#文件添加以下内容
ELECTRON_BUILDER_BINARIES_MIRROR "http://npm.taobao.org/mirrors/electron-builder-binaries/"
electron_mirror "https://cdn.npm.taobao.org/dist/electron/"
registry "https://registry.npm.taobao.org/"


#npm 配置方法
npm config edit
# 在弹出的ini文件中修改：
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/
electron_mirror=https://cdn.npm.taobao.org/dist/electron/
registry=https://registry.npm.taobao.org/



***无关教程---请忽略
1、查看一下当前源
yarn config get registry

2、切换为淘宝源
yarn config set registry https://registry.npm.taobao.org

3、或者切换为自带的
yarn config set registry https://registry.yarnpkg.com

2、建vite+vue

# 创建项目目录 
electron-vite-vue

# 进入项目目录
cd electron-vite-vue

# 创建项目
yarn create @vitejs/app electron-vite-vue --template vue

# 安装依赖
yarn

# 运行项目
yarn dev

3、引入electron

# 安装
yarn add --dev electron

# 注意
安装过程会出现网路问题，解决方法
1、配置第一步内容
2、梯子

4、增加electron需要用到的文件

# 项目根目录添加
main.js
preload.js

image.png

5、配置main.js

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

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    mainWindow.loadFile('dist/index.html')
}

app.whenReady().then(() => {
    createWindow()

    app.on('activate', function () {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

6、配置preload.js

# 按照electron最新的思路，vue页面中不能使用nodejs和electron，electron手册中要求通过preload.js隔离vue页面和main.js的交互。

# 这是electron手册中的原文
# This feature is incredibly useful for two main purposes:
# By exposing ipcRenderer(https://www.electronjs.org/docs/latest/api/ipc-renderer/) helpers to the renderer, you can use inter-process communication (IPC) to trigger main process tasks from the renderer (and vice-versa).
# If you're developing an Electron wrapper for an existing web app hosted on a remote URL, you can add custom properties onto the renderer's `window` global that can be used for desktop-only logic on the web client's side.

# 在preload.js中添加
const { contextBridge } = require('electron')
// 在vue页面中引用window.$electron.titile，获得 'electron-vite-vue'
contextBridge.exposeInMainWorld('$electron', {
    title: 'electron-vite-vue'
})

# 修改src/app.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!--修改--><HelloWorld :msg="message" />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
// 引用preload.js中定义的常量
const message = window.$electron.title

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

7、修改vite项目配置文件

# 修改vite.config.js 文件，配置app项目根路径
base: path.resolve(__dirname, './dist')

# 全文
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  base: path.resolve(__dirname, './dist'),
  plugins: [vue()]
})

8、修改package.json文件

# electron main 入口配置
"main": "main.js",

# electron 启动脚本配置
"electron:start": "vite build & electron ."

# 全文
{
  "name": "electron-vite-vue",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "scripts": {
    "electron:start": "vite build & electron ."
  },
  "dependencies": {
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.3.0",
    "@vue/compiler-sfc": "^3.0.5",
    "electron": "^13.2.1",
    "vite": "^2.4.4"
  }
}

9、启动项目

yarn electron:start
npm run electron:start

10、展示

image.png

11、应用打包

# 待更新