步驟
- git clone https://github.com/electron/electron-quick-start //electron項目clone到本地 npm install安裝依賴
- 已經(jīng)存在的vue項目 部署到nginx中或者其他服務(wù)器中，我的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
執(zhí)行npm run build 時候 會下載對應(yīng)的electron包 此過程可能會較慢 且容易出錯
在打包之后改變調(diào)用地址
（注意：此處要求 打包命令后面沒加 --asar ,否則打包之后改變不了）
可以修改app文件夾下的 ，main.js文件中的 mainWindow.loadURL("部署ip")來改變相應(yīng)的調(diào)用頁面
問題后續(xù) 1. 此方只是electron桌面外殼 把頁面嵌入electron中 2.網(wǎng)上也有把vue打包之后的dist文件夾中html和static文件直接放到electron根目錄下 執(zhí)行打包 此處有個vue項目接口請求代理問題钢悲？
解決辦法:在vue項目中 把http://192.168.1.135 這個地址寫在static文件夾目錄中怔球，在axios請求時鸦采，給每個接口都加上http://后臺項目部署ip 打包后(不加--asar)可以直接修改部署ip 如果打包中添加--asra 不知道還能不能直接修改荸百？
