Vite2+Vue3+Electron16 环境配置

使用 Yarn

以获得更好的体验

npm install -g yarn

也许后面你需要对~/.yarnrc添加以下内容，以方便进行 Electron 的安装

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/"

安装 Vite

本段完全参考 开始 | Vite 官方中文文档

安装时根据情况选择模板即可

>>yarn create vite
yarn create v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "create-vite@2.6.6" with binaries:
      - create-vite
      - cva
✔ Project name: … my-project
✔ Select a framework: › vue
✔ Select a variant: › vue

Done. Now run:

  cd my-project
  yarn
  yarn dev

✨  Done in 11.20s.

现在，你可以通过 yarn vite 运行开发服务器

vite v2.6.14 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 252ms.

安装 Electron

引入

在 Vite 项目目录下运行

yarn add --dev electron

如果出现网络问题，也许你需要配置一下镜像，参考第一部分

配置 package.json

你的package.json应该是这样的

{
  "name": "elec-lib",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
  },
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "electron": "^16.0.2",
    "vite": "^2.6.4"
  }
}

为保证 Electron 可运行，添加如下内容

"main": "main.js",
"license": "MIT",  //你可以不填，只是会警告

为方便，可以在scripts下新增

"elec": "electron ."

以便你可以在项目根目录运行yarn elec时打开 Electron

配置必要内容

本段内容基于 快速入门 | Electron (electronjs.org)

main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 此处更换为 Vite项目的地址
  win.loadURL('http://localhost:3000')
}
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  }
)})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

preload.js

暂时置空，文件不存在则无法运行 Electron

开发

测试方法

你需要两个终端进行完整的测试操作

1. Vite 对 Vue 项目进行构建，运行在http://localhost:3000
2. 随后启动 Electron，嵌套该页面

首先使用 Vite 对项目进行构建，并自动发布

yarn vite

然后运行 Electron

yarn elec

在 Vue 中使用 Electron

出于 Electron 的 流程模型 设计，你无法直接在 Vue 中访问形如process的对象

但是你可以通过preload.js实现，例子如下

preload.js

const { contextBridge } = require('electron')
contextBridge.exposeInMainWorld('$electron', {
    title: process.versions.electron
})

App.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
const message = "Electron version:" + window.$electron.title
</script>
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld :msg="message" />
</template>

打包

Vite 构建

打包路径配置

由于 Vite 默认构建时使用绝对路径，所以需要改动vite.confjg.js

// https://vitejs.dev/config/
export default defineConfig({
	// ...
  base:'./'
  // ...
})

然后使用yarn build进行打包

>>yarn build         
yarn run v1.22.17
$ vite build
vite v2.6.14 building for production...
✓ 14 modules transformed.
dist/assets/logo.03d6d6da.png    6.69 KiB
dist/index.html                  0.49 KiB
dist/assets/index.547320a6.js    1.90 KiB / gzip: 1.01 KiB
dist/assets/index.16c4fe9c.css   0.20 KiB / gzip: 0.17 KiB
dist/assets/vendor.0f8d2e2f.js   49.63 KiB / gzip: 19.94 KiB
✨  Done in 1.14s.

Electron 构建

修改页面载入方式

无须解释

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // win.loadURL('http://localhost:3000')
  win.loadFile('./dist/index.html')
}

使用 Electron Forge

安装

yarn add --dev @electron-forge/cli
npx electron-forge import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore


We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

使用yarn make进行构建

>>yarn make                                  
yarn run v1.22.17
$ electron-forge make
✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64
✨  Done in 14.95s.

你可以在out文件夹下找到构建目标

如果需要跨平台构建，请自行查阅 Electron Forge 文档