Electron打包vue项目成exe桌面应用程序

H@Z*rTE|i

已于 2023-01-12 09:26:40 修改

阅读量1.4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue3 vue2 js 文章标签： vue.js javascript electron

于 2022-10-13 09:35:10 首次发布

本文链接：https://blog.youkuaiyun.com/IT13333/article/details/127294892

vue2 同时被 3 个专栏收录

24 篇文章

订阅专栏

16 篇文章

订阅专栏

8 篇文章

订阅专栏

本文介绍两种使用Electron结合Vue项目进行应用打包的方法。第一种方式是直接克隆Electron项目并进行修改，第二种方式是在Vue项目中引入Electron。文章详细讲解了每一步操作流程，包括安装依赖、配置打包命令等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式一：克隆electron项目进行打包
第一步：克隆electron项目并运行

1、git clone https://github.com/electron/electron-quick-start
2、cd electron-quick-start
3、npm install
4、npm start // 启动项目，会打开electron程序

第二步：打包程序

1、先将vue项目打包：npm run build，将生成的dist文件放到electron项目根目录下

2、修改electron项目目录下main.js中的加载文件的路径

  mainWindow.loadFile('index.html') // 默认的请求路径
    mainWindow.loadFile('./dist/index.html') // 修改后的：将文件路径替换为打包好的dist目录下的index.html

1
2
3、npm i：安装依赖，npm run start：启动程序，electron应用程序打开后如果页面正常显示则没有问题，接下来安装依赖进行打包即可

4、安装electron、electron-packager依赖：

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

5、在package.json文件中配置打包命令

"package": "electron-packager . electron桌面应用程序 --win --out ../electron桌面应用程序 --electron-version 6.0.7 --overwrite --icon=./dist/static/img/logo.ico --platform win32 --ignore=node_modules"

6、运行npm run package进行打包

打包里会提示: WARNING: Make sure that .NET Framework 4.5 or later and Powershell 3 or later are installed, otherwise extracting the Electron zip file will hang.
也就是说NET Framework必须要是4.5以上版本、Powershell必须要是3.0以上的版本才可以成功打包

方式二：vue结合electron打包
1、将electron项目中的main.js复制到vue项目根目录下重命名为.electron.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 500, // 窗口宽度
    height: 1200, // 窗口高度
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('./dist/index.html') // 加载页面路径
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

2、安装electron、electron-packager依赖：

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

3、在package.json中配置命令、引入.electron.js

"electron_dev": "npm run build && electron .electron.js",
"package": "electron-packager . electron桌面应用程序 --win --out ../../electron桌面应用程序 --electron-version 6.0.7 --overwrite --icon=./dist/static/img/logo.ico --platform win32 --ignore=node_modules"

4、打包

npm run build // 项目打包
npm run package // electron打包

如果有啥疑问请点击看看上一个作品，路过大佬有啥建议可以留言，共同进步。