参考链接:blog.csdn.net/qq_40128375…
方式一:克隆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
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打包