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

shevy 發布于2019-08-22 15:49 / 2335人閱讀

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

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

一、安裝electron

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

二、run build

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

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

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

三、創建入口文件和配置

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

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

這里貼的別人的代碼，你如果想修改，學習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

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

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

就這么結束了，react build的文件能在非服務器環境跑起來真是方便極了，

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93784.html

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

摘要：話不多說，進入正題一安裝為了方便你以后的使用，建議全局安裝。怎么安裝就不廢話了，不會的去官網，安裝好之后也安裝一個專用的打包工具，以方便我們后面打包的時候使用。有些只能在該事件發生后才能被使用。也許你不甘心只寫網頁，被人叫做他會寫網頁，也許你有項目需求，必須寫桌面應用，然而你只會前端，沒關系。網上的教程很多，但是很少有能說的淺顯易懂的，我盡力將electron打包應用說的清晰明了，希...

suemi 2019-08-02 10:02 評論0 收藏0
使用 electron-vue 構建你的桌面應用

摘要：翻譯一下它是一個運行時，可以像一樣這樣執行也是一個使用構建跨平臺原生桌面應用的框架。具有兩個進程，分別是主進程，以及渲染進程。什么是 electron 官網里這么說：Electron提供了一個Nodejs的運行時，專注于構建桌面應用，同時使用web頁面來作為應用的GUI，你可以將其看作是一個由JavaScript控制的迷你版的Chromium瀏覽器。翻譯一下：它是一個運行時，可以像...

qieangel2013 2019-08-21 17:21 評論0 收藏0
如何使用前端技術開發一個桌面跨端應用

摘要：使用實現桌面應用實現離線可用很多方法，比如使用技術。還有一個好處，因為它完全基于來實現可以使用的一些新功能，那我們理論上可以在做桌面應用時順手把應用也做了。本文將會講述一個完整的跨端桌面應用?代碼畫板?的構建，會涉及到整個軟件開發流程，從開始的設計、編碼、到最后產品成型、包裝等。本文不僅僅是一篇技術方面的專業文章，更會有很多產品方面的設計思想和將技術轉換成生產力的思考，我將結合我自...

shixinzhang 2019-08-23 15:53 評論0 收藏0
使用React、Electron、Dva、Webpack、Node.js、Websocket快速構建

摘要：是一個使用和等技術創建原生程序的框架，它負責比較難搞的部分，你只需把精力放在你的應用的核心上即可。談談技術選型使用去做底層的繪制，大項目首選狀態管理的最佳實踐肯定不是，目前首選，或者。 showImg(https://segmentfault.com/img/bVbtqlI?w=1308&h=565); 目前Electron在github上面的star量已經快要跟React-nativ...

Caicloud 2019-08-30 11:01 評論0 收藏0