search

hunter-ji / Blog

My Blog.
121 stars 38 forks source link

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

Open hunter-ji opened 2 years ago

hunter-ji commented 2 years ago

一. 简介

上一篇文章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 () {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。

4. 编辑package.json

首先修改main属性，将main: main.js改为main: electron/main.js。

{
  "name": "kuari",
  "version": "0.0.0",
  "main": "electron/main.js",
    ... 
}

接着，编辑build属性：

"build": {
  "appId": "com.your-website.your-app",
  "productName": "ElectronApp",
  "copyright": "Copyright © 2021 <your-name>",
  "mac": {
    "category": "public.app-category.utilities"
  },
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true
  },
  "files": [
    "dist/**/*",
    "electron/**/*"
  ],
  "directories": {
    "buildResources": "assets",
    "output": "dist_electron"
  }
}

然后，更新scripts属性。

此处需要先安装两个库：

yarn add -D cross-env electron-builder

更新后的scripts如下：

{
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .", // 此处需要设置环境变量以保证开发时加载url
  "electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\"",
  "electron:build": "vite build && electron-builder" // 新增打包命令
}

最后，更新后的package.json完整内容如下：

{
  "name": "kuari",
  "version": "0.0.0",
  "main": "electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .",
    "electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\"",
    "electron:build": "vite build && electron-builder"
  },
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "concurrently": "^6.3.0",
    "cross-env": "^7.0.3",
    "electron": "^15.1.2",
    "electron-builder": "^22.13.1",
    "vite": "^2.6.4",
    "wait-on": "^6.0.0"
  },
  "build": {
    "appId": "com.my-website.my-app",
    "productName": "MyApp",
    "copyright": "Copyright © 2021 kuari",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    }
  }
}

四. 打包

直接执行打包命令即可开始打包。

yarn electron:build

打包完成之后，会多出两个文件夹dist和dist_electron，其文件结构如下：

.
├── README.md
├── dist
│   ├── assets
│   ├── favicon.ico
│   └── index.html
├── dist_electron
│   ├── MyApp-0.0.0-mac.zip
│   ├── MyApp-0.0.0-mac.zip.blockmap
│   ├── MyApp-0.0.0.dmg
│   ├── MyApp-0.0.0.dmg.blockmap
│   ├── builder-debug.yml
│   ├── builder-effective-config.yaml
│   └── mac
...

至此，便完成了打包。

后面再来写写关于electron的优化，减少electron打包后应用的体积。（这玩意儿确实打包下来有点大呢/狗头）

hunter-ji commented 2 years ago

现在了解的是在mac上打包就行了，在不同平台打包我打包不同平台直接对应的包。

你好，我在Mac上打包出现了这个报错，目前暂时查找原因 5f2c5e12-5883-4b92-b22d-a64b83020c99

我看报错有一个权限问题，你试试不要放到桌面上的文件夹，而是在用户家目录下编译看看呢

zou9229 commented 2 years ago

大佬，有个问题想请教下。之前我用vue+vite写的一个前端，使用axios的时候设置了前端的通信端口是localhost:3000，用文章方法打包成桌面端后，打开使用axios的时候还是回去访问localhost的ip，然后访问失败。我在查看端口号时发现打包后的项目没有开启3000端口，再npm run dev运行前端打开3000端口的时候，打包后的桌面端才可以正常使用，这问题怎么解决。[大哭]

KKKZOZ commented 2 years ago

大佬，想请教一下，怎样才能在这个简单配置下加点东西 然后支持在nodejs环境下使用import呀

zou9229 commented 2 years ago

你要加什么？这个和正常的前端开发基本一样。。。

hunter-ji commented 2 years ago

大佬，有个问题想请教下。之前我用vue+vite写的一个前端，使用axios的时候设置了前端的通信端口是localhost:3000，用文章方法打包成桌面端后，打开使用axios的时候还是回去访问localhost的ip，然后访问失败。我在查看端口号时发现打包后的项目没有开启3000端口，再npm run dev运行前端打开3000端口的时候，打包后的桌面端才可以正常使用，这问题怎么解决。[大哭]

你好，你可以看下文章步骤三.3处，生产环境下其实应该是访问编译好的文件了，而不再是web server了。

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

大佬，想请教一下，怎样才能在这个简单配置下加点东西 然后支持在nodejs环境下使用import呀

你好，我理解你的需求应该是想在nodejs中处理es6模块，给你推荐一个文章，阮一峰大佬的Node.js 如何处理 ES6 模块，讲得很通俗易懂，希望可以解决你的问题。

以及nodejs官方的说明，也可以看看。

KKKZOZ commented 2 years ago

大佬，想请教一下，怎样才能在这个简单配置下加点东西 然后支持在nodejs环境下使用import呀

你好，我理解你的需求应该是想在nodejs中处理es6模块，给你推荐一个文章，阮一峰大佬的Node.js 如何处理 ES6 模块，讲得很通俗易懂，希望可以解决你的问题。

以及nodejs官方的说明，也可以看看。

好的，谢谢大佬，受教了！

hunter-ji commented 2 years ago

大佬，想请教一下，怎样才能在这个简单配置下加点东西 然后支持在nodejs环境下使用import呀

你好，我理解你的需求应该是想在nodejs中处理es6模块，给你推荐一个文章，阮一峰大佬的Node.js 如何处理 ES6 模块，讲得很通俗易懂，希望可以解决你的问题。 以及nodejs官方的说明，也可以看看。

好的，谢谢大佬，受教了！

😊😊😊

zou9229 commented 2 years ago

大佬，有个问题想请教下。之前我用vue+vite写的一个前端，使用axios的时候设置了前端的通信端口是localhost:3000，用文章方法打包成桌面端后，打开使用axios的时候还是回去访问localhost的ip，然后访问失败。我在查看端口号时发现打包后的项目没有开启3000端口，再npm run dev运行前端打开3000端口的时候，打包后的桌面端才可以正常使用，这问题怎么解决。[大哭]

你好，你可以看下文章步骤三.3处，生产环境下其实应该是访问编译好的文件了，而不再是web server了。

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

大佬，那有什么解决方案吗，能够让electron桌面端开启一个webservice，不去访问公网ip

hunter-ji commented 2 years ago

大佬，有个问题想请教下。之前我用vue+vite写的一个前端，使用axios的时候设置了前端的通信端口是localhost:3000，用文章方法打包成桌面端后，打开使用axios的时候还是回去访问localhost的ip，然后访问失败。我在查看端口号时发现打包后的项目没有开启3000端口，再npm run dev运行前端打开3000端口的时候，打包后的桌面端才可以正常使用，这问题怎么解决。[大哭]

你好，你可以看下文章步骤三.3处，生产环境下其实应该是访问编译好的文件了，而不再是web server了。

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

大佬，那有什么解决方案吗，能够让electron桌面端开启一个webservice，不去访问公网ip

可以啊，electron底层交互是node，你可以写个进程跑web。但是还是建议能使用文件还是使用文件吧。

KKKZOZ commented 2 years ago

大佬，想请教一下，怎样才能在这个简单配置下加点东西 然后支持在nodejs环境下使用import呀

你好，我理解你的需求应该是想在nodejs中处理es6模块，给你推荐一个文章，阮一峰大佬的Node.js 如何处理 ES6 模块，讲得很通俗易懂，希望可以解决你的问题。 以及nodejs官方的说明，也可以看看。

好的，谢谢大佬，受教了！

😊😊😊

大哥，我还想问个问题 就是Electron 是不是到目前为止都不支持原生的ES6模块导入呀（尽管nodejs版本已经支持了） 我试了很多次都不行 比如下面这种简单情况： 从main.ts里引入test.mjs main.ts: image

test.mjs: image 这是对应的minimal repo https://github.com/KKKZOZ/electron-minimal

kelegele commented 2 years ago

求更！！！ 《减少electron打包后应用的体积》

hunter-ji commented 2 years ago

求更！！！ 《减少electron打包后应用的体积》

好的！我一定努力！！！⛽️

Blank0120 commented 2 years ago

大佬，想请教一下，怎样才能在这个简单配置下加点东西 然后支持在nodejs环境下使用import呀

你好，我理解你的需求应该是想在nodejs中处理es6模块，给你推荐一个文章，阮一峰大佬的Node.js 如何处理 ES6 模块，讲得很通俗易懂，希望可以解决你的问题。 以及nodejs官方的说明，也可以看看。

好的，谢谢大佬，受教了！

😊😊😊

大哥，我还想问个问题 就是Electron 是不是到目前为止都不支持原生的ES6模块导入呀（尽管nodejs版本已经支持了） 我试了很多次都不行 比如下面这种简单情况： 从main.ts里引入test.mjs main.ts: image

test.mjs: image 这是对应的minimal repo https://github.com/KKKZOZ/electron-minimal

electron 目前只支持cjs，不能esm，具体看看下面的issue链接。 https://github.com/electron/electron/issues/21457

ForeverCZ commented 1 year ago

大佬我想请教下，main.js拆分的问题。 image 我在main.js文件里通过require引入事件监听的方法，并在app.whenReady()里执行，如下图： image 出现的问题： 在开发环境中，正常执行监听，打包后，事件监听不到，根本不执行监听回调。

apm29 commented 1 year ago

如果需要在vite.config.js指定base为其他值，比如base: “/test”,需要修改哪些，指定之后会找不到加载的js文件

apm29 commented 1 year ago

如果需要在vite.config.js指定base为其他值，比如base: “/test”,需要修改哪些，指定之后会找不到加载的js文件

好像不是base的问题，和这个问题一样的

lucodestation commented 1 year ago

求更《Vite+Electron快速构建一个VUE3桌面应用——自动更新》😁

lvxinliang commented 1 year ago

你好，我用你上面这个方式是可以打包成功的，但是我项目中用了child_process模块，执行了自己开发的'./electron/bin/hid_upgrade_tool'二进制程序，在打包的时候怎么能把这个二进制打包进去。抽空帮解答一下 目录结构、部分代码是这样的： image

hunter-ji commented 1 year ago

大佬，想请教一下，怎样才能在这个简单配置下加点东西 然后支持在nodejs环境下使用import呀

你好，我理解你的需求应该是想在nodejs中处理es6模块，给你推荐一个文章，阮一峰大佬的Node.js 如何处理 ES6 模块，讲得很通俗易懂，希望可以解决你的问题。 以及nodejs官方的说明，也可以看看。

好的，谢谢大佬，受教了！

😊😊😊

大哥，我还想问个问题 就是Electron 是不是到目前为止都不支持原生的ES6模块导入呀（尽管nodejs版本已经支持了） 我试了很多次都不行 比如下面这种简单情况： 从main.ts里引入test.mjs main.ts: image test.mjs: image 这是对应的minimal repo https://github.com/KKKZOZ/electron-minimal

electron 目前只支持cjs，不能esm，具体看看下面的issue链接。 electron/electron#21457

👍

hunter-ji commented 1 year ago

求更《Vite+Electron快速构建一个VUE3桌面应用——自动更新》😁

前段时间工作一直很忙，最近稍微空下来了，一起搞起来⛽️

hunter-ji commented 1 year ago

你好，我用你上面这个方式是可以打包成功的，但是我项目中用了child_process模块，执行了自己开发的'./electron/bin/hid_upgrade_tool'二进制程序，在打包的时候怎么能把这个二进制打包进去。抽空帮解答一下 目录结构、部分代码是这样的： image

你好，我之前也做过这样的场景，不过那时候还用的是vue-electron-builder，我大胆测试一波问题是一样的🐶。 我当时遇到遇到的问题也是打包之后发现找不到我的额外的二进制文件了，但是后面排查后发现，其实二进制文件是存在的，但是被打包进那个压缩包asar了，关键在于其路径是跟开发环境时候是不同的，需要自己排查一下路径。 然后呢还有一个方法，就是electron有一个参数，可以把某个文件不打包进去，单独放到打包后的某个目录下面，这个参数可能要稍等下时间，我晚上找一下... 这两个方向应该可以解决你的这个问题。

lvxinliang commented 1 year ago

你好，我用你上面这个方式是可以打包成功的，但是我项目中用了child_process模块，执行了自己开发的'./electron/bin/hid_upgrade_tool'二进制程序，在打包的时候怎么能把这个二进制打包进去。抽空帮解答一下 目录结构、部分代码是这样的： image

你好，我之前也做过这样的场景，不过那时候还用的是vue-electron-builder，我大胆测试一波问题是一样的🐶。 我当时遇到遇到的问题也是打包之后发现找不到我的额外的二进制文件了，但是后面排查后发现，其实二进制文件是存在的，但是被打包进那个压缩包asar了，关键在于其路径是跟开发环境时候是不同的，需要自己排查一下路径。 然后呢还有一个方法，就是electron有一个参数，可以把某个文件不打包进去，单独放到打包后的某个目录下面，这个参数可能要稍等下时间，我晚上找一下... 这两个方向应该可以解决你的这个问题。

感谢，这个方式解决了

    "mac": {
      "category": "public.app-category.utilities",
      "icon": "build/AppIcon.icns",
      "extraFiles": [{
          "from": "./electron/bin/mac/hid_upgrade_tool",
          "to": "./Resources"
        }]
    },
hunter-ji commented 1 year ago

你好，我用你上面这个方式是可以打包成功的，但是我项目中用了child_process模块，执行了自己开发的'./electron/bin/hid_upgrade_tool'二进制程序，在打包的时候怎么能把这个二进制打包进去。抽空帮解答一下 目录结构、部分代码是这样的： image

你好，我之前也做过这样的场景，不过那时候还用的是vue-electron-builder，我大胆测试一波问题是一样的🐶。 我当时遇到遇到的问题也是打包之后发现找不到我的额外的二进制文件了，但是后面排查后发现，其实二进制文件是存在的，但是被打包进那个压缩包asar了，关键在于其路径是跟开发环境时候是不同的，需要自己排查一下路径。 然后呢还有一个方法，就是electron有一个参数，可以把某个文件不打包进去，单独放到打包后的某个目录下面，这个参数可能要稍等下时间，我晚上找一下... 这两个方向应该可以解决你的这个问题。

感谢，这个方式解决了

    "mac": {
      "category": "public.app-category.utilities",
      "icon": "build/AppIcon.icns",
      "extraFiles": [{
          "from": "./electron/bin/mac/hid_upgrade_tool",
          "to": "./Resources"
        }]
    },

👍

prototypeSean commented 1 year ago

這篇好美啊，各種因果關係註解的好清楚，運氣不錯第100顆⭐奉上 想請教一下文中各種注釋您是怎麼讀的？慢慢啃官方文件嗎？

hunter-ji commented 1 year ago

這篇好美啊，各種因果關係註解的好清楚，運氣不錯第100顆⭐奉上 想請教一下文中各種注釋您是怎麼讀的？慢慢啃官方文件嗎？

多谢多谢！部分是官方的文档，还有些是做项目时候积累的，之前一直用的vue cli的插件，新手也是踩了不少坑，然后这儿看看那儿看看，也就积累了些。

Zi-Xiang-Chen commented 9 months ago

⭐️+1，感谢大佬分享知识 请问大佬在打包后对网络请求方面是否可以出一期相关的讲解 目前在打包后访问本地服务和访问远程服务较为迷茫 感谢感谢🙏 IMG_2772