步骤
- git clone https://github.com/electron/electron-quick-start //electron项目clone到本地 npm install安装依赖
- 已经存在的vue项目 部署到nginx中或者其他服务器中，我的vue项目中用到反向代理
- 找到main.js文件
// mainWindow.loadFile('index.html')
mainWindow.loadURL('http://192.168.1.135:8080') //换成vue项目部署的ip地址
- 修改package.json 配置 添加打包命令
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron .",
"build": "electron-packager ./ --win --out ./OutApp --arch=x64"
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^17.0.1"
},
"dependencies": {
"electron-packager": "^15.4.0"
}
}
"build": "electron-packager ./ --win --out ./OutApp --arch=x64"
"."后面是打包后的文件夹名称
在后面加上 --asar 打包后 会在 resources文件夹下 生成app.asar 不加就生成如下图所示文件
js.PNG
- npm install electron-packager
执行npm run build 时候 会下载对应的electron包 此过程可能会较慢 且容易出错
在打包之后改变调用地址
（注意：此处要求 打包命令后面没加 --asar ,否则打包之后改变不了）
可以修改app文件夹下的 ，main.js文件中的 mainWindow.loadURL("部署ip")来改变相应的调用页面
问题后续 1. 此方只是electron桌面外壳 把页面嵌入electron中 2.网上也有把vue打包之后的dist文件夹中html和static文件直接放到electron根目录下 执行打包 此处有个vue项目接口请求代理问题？
解决办法:在vue项目中 把http://192.168.1.135 这个地址写在static文件夹目录中，在axios请求时，给每个接口都加上http://后台项目部署ip 打包后(不加--asar)可以直接修改部署ip 如果打包中添加--asra 不知道还能不能直接修改？
