使用 Vite 构建 Vue + TypeScript + Electron 桌面应用

发表于 分类于 ，

又是心血来潮想学前端，然后搞个桌面应用出来，这篇文章学习和记录一下基本操作。

0 准备工作

首先，需要安装 Node.js，对于 Mac 来说：

> brew install node@18

之后，需要将路径添加到终端配置文件中，对于 zsh 来说就是 .zprofile 或者 .zshrc：

# Set PATH for Node.js.
export PATH="/opt/homebrew/opt/node@18/bin:$PATH"

对于国内用户，brew 可以切换到国内清华源，加到 .zprofile 或者 .zshrc：

# Set PATH, MANPATH, etc., for Homebrew.
eval "$(/opt/homebrew/bin/brew shellenv)"
export HOMEBREW_BREW_GIT_REMOTE="https://mirrors.ustc.edu.cn/brew.git"
export HOMEBREW_CORE_GIT_REMOTE="https://mirrors.ustc.edu.cn/homebrew-core.git"
export HOMEBREW_BOTTLE_DOMAIN="https://mirrors.ustc.edu.cn/homebrew-bottles"

npm 可以切换至国内淘宝源，加到 .npmrc：

registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_custom_dir=22.0.0

1 使用 Vite 创建 Vue + TypeScript 项目

一行命令：

> npm create vite@latest my-vue-app -- --template vue-ts

之后，执行：

> cd my-vue-app
> npm install
> npm run dev

在浏览器中打开 URL 就可以看到项目了：

2 使用 Electron 加载项目

一行命令：

> npm install electron -D

之后，在项目根目录下创建 electron/，从 Quick Start | Electron (electronjs.org) 抄来 main.ts 和 preload.ts 放到里面。

其中，main.ts 修改：

// mainWindow.loadFile(path.join(__dirname, 'index.html'))
mainWindow.loadURL("http://localhost:5173")

另外，vite.config.ts 修改：

export default defineConfig({
  server: {
    port: 5173
  },
  ...
})

最后，安装 concurrently 和 wait-on：

> npm install concurrently wait-on -D

并且，package.json 修改：

"main": "electron/main.ts",
"scripts": {
  ...
  "electron": "wait-on tcp:5173 && electron .",
  "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\""
},

此时，执行：

> npm run electron:serve

就可以看到项目了：

而且，对 HelloWorld.vue 的修改会实时渲染到 Electron 中。

3 使用 Electron 打包项目

首先，main.ts 修改：

const NODE_ENV = process.env.NODE_ENV

const createWindow = () => {
  ...
  if (NODE_ENV === 'development') {
    mainWindow.loadURL("http://localhost:5173")
  } else {
    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'))
  }
}

其次，vite.config.ts 修改：

export default defineConfig({
  base: path.resolve(__dirname, './dist/'),
  ...
})

最后，安装 cross-env 和 electron-builder：

> npm install cross-env electron-builder -D

并且，package.json 修改：

{
  ...
  "build": {
    "appId": "com.your-website.your-app",
    "productName": "ElectronApp",
    "copyright": "Copyright 2022 <your-name>",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist-electron"
    }
  },
  "scripts": {
    ...
    "electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron .",
    "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
    "electron:build": "npm run build && electron-builder"
  },
  ...
}

此时，执行：

> npm run electron:build

就可以在 dist-electron\ 目录下看到打包好的应用了：

参考文章