Vite+Electron快速构建一个VUE3桌面应用(三)——打包

开发者小橙

独立开发者｜全栈工程师

一. 简介

上一篇文章Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载完成了开发时的动态模块热重载功能，现在是时候来看看怎么完成最后一步——打包了。

源码：https://github.com/Kuari/Blog/tree/master/Examples/vite_electron/vite_electron_3

系列文章：

二. 思路

先说结论，重点还是在于mainWindow.loadURL()。

打包后还是加载http://localhost:3000是无法运行的，因此，此处需要先用vite打包好，然后使用electron-builder加载vite打包后的文件进行打包。

为了代码能够根据不同环境在运行时加载http://localhost:3000，在打包时加载文件，此处需要使用环境变量来切换生产和开发环境。

三. 实现

1. 环境变量

此处使用环境变量NODE_ENV来切换生产和开发环境，生产环境为NODE_ENV=production，开发环境为NODE_ENV=development，若有其它如release等环境可在此基础上拓展。

2. 创建electron文件夹

在项目根目录下创建文件夹electron，将main.js和preload.js文件移动进来。其结构如下所示：

.
├── README.md
├── electron
│   ├── main.js
│   └── preload.js
...

若还是不太明白可以看看源码中文件结构。

3. 编辑electron/main.js

该文件主要是需要根据环境变量切换electron加载的内容，修改内容如下：

mainWindow.loadURL(
  NODE_ENV === 'development'
  ? 'http://localhost:3000'
  :`file://${path.join(__dirname, '../dist/index.html')}`
);

修改后的完整内容如下：

// electron/main.js

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')

const NODE_ENV = process.env.NODE_ENV

function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载 index.html
  // mainWindow.loadFile('dist/index.html') 将该行改为下面这一行，加载url
  mainWindow.loadURL(
    NODE_ENV === 'development'
      ? 'http://localhost:3000'
      :`file://${path.join(__dirname, '../dist/index.html')}`
  );

  // 打开开发工具
  if (NODE_ENV === "development") {
    mainWindow.webContents.openDevTools()
  }

}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // 通

编辑于 2021-10-21 09:19

Vue.js

Vue.js 3

Electron