electron原來這么簡單----打包你的react、VUE桌面應(yīng)用程序

shevy 發(fā)布于2019-08-22 15:49 / 2431人閱讀

摘要：話不多說，進(jìn)入正題一安裝為了方便你以后的使用，建議全局安裝。怎么安裝就不廢話了，不會的去官網(wǎng)，安裝好之后也安裝一個專用的打包工具，以方便我們后面打包的時候使用。有些只能在該事件發(fā)生后才能被使用。

也許你不甘心只寫網(wǎng)頁，被人叫做“他會寫網(wǎng)頁”，也許你有項目需求，必須寫桌面應(yīng)用，然而你只會前端，沒關(guān)系。網(wǎng)上的教程很多，但是很少有能說的淺顯易懂的，我盡力將electron打包應(yīng)用說的清晰明了，希望能你在寫自己的應(yīng)用的時候，感到心中有數(shù)。話不多說，進(jìn)入正題：

一、安裝electron

為了方便你以后的使用，建議全局安裝。以后在任何文件夾都能使用electron。怎么安裝就不廢話了，不會的去官網(wǎng)，安裝好electron之后也安裝一個專用的打包工具electron-packager，以方便我們后面打包的時候使用。

二、run build

你的react項目寫完后（其實寫到一半，四分之一你隨意，只要頁面上有點內(nèi)容了），執(zhí)行 npm run
build,會在build文件夾下面生成如下圖所示的結(jié)構(gòu)：

這時候，你試著點擊index.html看看（無需放到服務(wù)器靜態(tài)資源目錄），如果能看到內(nèi)容，就是ok的，如果一片白屏，控制臺沒錯誤提示，那么你只要在package.json里面添加一個"homepage":"./",再次執(zhí)行build，就可以看到內(nèi)容了。

如果你index.html沒內(nèi)容，就不要往下繼續(xù)了，檢查你的項目是否存在路徑問題。

三、創(chuàng)建入口文件和配置

基于之前index.html已經(jīng)能正常展示的前提下，在你項目build文件夾中創(chuàng)建以下2個文件
main.js

const electron = require("electron");
// 控制應(yīng)用生命周期的模塊
const {app} = electron;
// 創(chuàng)建本地瀏覽器窗口的模塊
const {BrowserWindow} = electron;
 
// 指向窗口對象的一個全局引用，如果沒有這個引用，那么當(dāng)該javascript對象被垃圾回收的
// 時候該窗口將會自動關(guān)閉
let win;
 
function createWindow() {
  // 創(chuàng)建一個新的瀏覽器窗口
  win = new BrowserWindow({width: 1920, height: 1080});
 
  // 并且裝載應(yīng)用的index.html頁面
  win.loadURL(`file://${__dirname}/index.html`);
 
  // 打開開發(fā)工具頁面
  //win.webContents.openDevTools();
 
  // 當(dāng)窗口關(guān)閉時調(diào)用的方法
  win.on("closed", () => {
    // 解除窗口對象的引用，通常而言如果應(yīng)用支持多個窗口的話，你會在一個數(shù)組里
    // 存放窗口對象，在窗口關(guān)閉的時候應(yīng)當(dāng)刪除相應(yīng)的元素。
    win = null;
  });
}
 
// 當(dāng)Electron完成初始化并且已經(jīng)創(chuàng)建了瀏覽器窗口，則該方法將會被調(diào)用。
// 有些API只能在該事件發(fā)生后才能被使用。
app.on("ready", createWindow);
/* var mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
}); */
// 當(dāng)所有的窗口被關(guān)閉后退出應(yīng)用
app.on("window-all-closed", () => {
  // 對于OS X系統(tǒng)，應(yīng)用和相應(yīng)的菜單欄會一直激活直到用戶通過Cmd + Q顯式退出
  if (process.platform !== "darwin") {
    app.quit();
  }
});
 
app.on("activate", () => {
  // 對于OS X系統(tǒng)，當(dāng)dock圖標(biāo)被點擊后會重新創(chuàng)建一個app窗口，并且不會有其他
  // 窗口打開
  if (win === null) {
    createWindow();
  }
});
 
// 在這個文件后面你可以直接包含你應(yīng)用特定的由主進(jìn)程運(yùn)行的代碼。
// 也可以把這些代碼放在另一個文件中然后在這里導(dǎo)入。

這里貼的別人的代碼，你如果想修改，學(xué)習(xí)electron去吧，這里只是簡單介紹。
package.json

{
    "name":"crh_chat",
    "version":"1.0-test",
    "main":"main.js",
    "author": {
        "name":"YOURNAME"
    },
    "license": "MIT"
}

做完這兩件事基本上就ok了。

四、打包

在build文件夾下打開命令行

electron-packager . crh-chat --win --out=release --arch=x64 --version=1.0.0 --electron-version=1.8.4 --overwrite --icon=./favicon.ico

這是我的，具體參數(shù)你得根據(jù)自己的修改，使用如下

圖上的--out是生成文件夾的名字，里面有一堆的dll, 執(zhí)行完成，就可以在你的out文件夾中看到可執(zhí)行程序了點擊一下，就成功的跑起來了

就這么結(jié)束了，react build的文件能在非服務(wù)器環(huán)境跑起來真是方便極了，

多說一嘴，如果你的react項目index頁面死活出不來，可能是你使用了react-router的BroswerHistory，換成HashHistory就可以了。
VUE項目出不來的話，很大可能是使用了history路由模式，改成hash路由模式就可以了

云服務(wù)器 GPU云服務(wù)器簡單java程序打包 webrtc結(jié)合electron桌面分享 vue webrtc 桌面共享小程序是這么做的

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/93784.html

發(fā)表評論

登陸后可評論

0條評論

shevy

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow神經(jīng)網(wǎng)絡(luò)

閱讀 558·2023-04-25 17:26
HostHatch芝加哥大硬盤VPS年付15美元起,香港NVMe硬盤VPS年付15美元起

閱讀 1560·2021-08-05 09:58
AlloyTouch 0.2.0發(fā)布--魚和熊掌兼得

閱讀 2018·2019-08-30 13:17
追求極致--純css制作三角、圓形按鈕，兼容ie6

閱讀 1013·2019-08-28 17:52
ES6—數(shù)組新方法（7）

閱讀 1127·2019-08-26 18:27
2019年7-8月份前端面試題

閱讀 1467·2019-08-26 14:05
javascript使用canvas繪圖（一）

閱讀 3680·2019-08-26 14:05
使用JavaScript將圖片保存至本地

閱讀 1682·2019-08-26 10:45

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

electron原來這么簡單----打包你的react、VUE桌面應(yīng)用程序

相關(guān)文章