Vue3.项目使用Electron 最新^13.1.7打包.exe桌面端应用

近期接手一个老项目，三期需要把网页端打包成桌面端，最终选用Electron来构建，好了话不多说，直接开始操作！

1、先从Electron官网把他的案例glone下来，有时候网络不好会下载失败，多试几遍就可以了，我挂的vpn下载是很快。

# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库
$ npm install
# 运行应用
$ npm start

启动成功后你会看到一个hello word的内容。

2、进入自己的项目，找到package.json，在script中添加下边两行代码
在这里插入图片描述

"scripts": {
    "electron_dev": "npm run build && electron build/main.js",
    "electron_build": "electron-packager ./dist 项目名称 --platform=win32 --arch=x64 --overwrite --icon=./public/favicon.ico" 
  },

第二行代码注释：
sourcedir：在本例中是./dist
appname：当前构建应用的名称
platform：要构建的平台类型,可取的值有 darwin, linux, mas, win32,
icon：打包应用的ico图标(注意：一定是原ico文件，不要偷懒改后缀名，否则打包时报错如下图。.ico格式文件制作地址https://www.bitbug.net)
在这里插入图片描述
3、分别安装electron 和electron-packager

npm intall electron --save-dev
npm install electron-packager --save-dev

4、将vue.config.js 中的publicPath: ‘/’ 修改为 ‘./’，没有自行添加。新搭建的项目是没有vue.config.js ，自己新建一个配置文件，并填充内容

module.exports = {
  publicPath: './',
}

5、把你克隆的官网代码文件打开，找到main.js和preload.js。vue3.0 项目目录没有build文件夹所以自己创建一个就可以，把main.js和preload.js复制进去，我是把main改成了electron，也可以不改，我有点多此一举。改过之后还需要把package.json中新添加的第一行代码文件名同步一下
在这里插入图片描述
6、到此就可以使用electron_dev命令运行看到页面了，并且项目目录下会生成一个dist文件。如果打开是空白页面，需要注意main.js中的打开地址

7、测试没问题就可以使用electron_build打包了，打包前还需要将在官方克隆的项目中这个三个文件复制到刚才自动生成的dist文件中，下图是我放置好的，同样注意main.js中的路径问题，我的打包完目录是在app下
在这里插入图片描述

打包完生成的桌面端文件夹

好了，到这里整个项目用electron就打包好了，有哪里不对或者不准确还请在下方留言讨论。

Vue3.项目使用Electron 最新^13.1.7打包.exe桌面端应用

猜你喜欢