前言

　　做桌面端用了flutter發現各種問題，其中svga透明通道和適配第三方游戲等等都是用h5兼容來做，麻煩的很，最主要的是flutter的初衷是同時做app和桌面端，但如果只是用flutter做桌面端那么性價比太低且兼容性問題太多，因此推薦使用electron來做桌面端應用，以現有的電腦配置來說，只要你的代碼不要寫的太爛，在用戶的體驗中感受不到和flutter桌面端應用性能上有明顯的差別，且electron支持Linux系統，多端兼容性好，強烈推薦。

創建electron項目（快捷指令，盡量不要先創建vue3項目再安裝electron并配置，超級麻煩且容易很多坑）

cnpm create electron-vite
cnpm i

或

cnpm create @quick-start/electron@latest

打包electron項目

npm run build

或通過以下指令來打包對應的平臺包

如果卡在download提示github的網絡問題導致打包失敗，則自己根據報錯提示鏈接先下載對應的包，再手動放到對應的目錄即可，以下是各平臺對應的目錄：

Linux: $XDG_CACHE_HOME or ~/.cache/electron/
MacOS: ~/Library/Caches/electron/
Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/Local/electron/Cache/

package.json打包配置（如果通過快捷指令生成的項目會自動在json5或yml文件中配置）

"build": {
    "appId": "com.example.app", // 應用程序id 
    "productName": "測試", // 應用名稱 
    // 設置為 true 可以把自己的代碼合并并加密
      "asar": true,
    "directories": {
        "buildResources": "build", // 構建資源路徑默認為build
        "output": "dist" // 輸出目錄 默認為dist
    },
    "mac": {
        "category": "public.app-category.developer-tools", // 應用程序類別
        "target": ["dmg", "zip"],  // 目標包類型 
        "icon": "build/icon.icns" // 圖標的路徑
    },
    "dmg": {
        "background": "build/background.tiff or build/background.png", // 背景圖像的路徑
        "title": "標題",
        "icon": "build/icon.icns" // 圖標路徑
    },
    "win": {
     // 打包成一個獨立的 exe 安裝程序
        // 'target': 'nsis',
        // 這個意思是打出來32 bit + 64 bit的包，但是要注意：這樣打包出來的安裝包體積比較大，所以建議直接打32的安裝包。
        // 'arch': [
        //   'x64',
        //   'ia32'
        // ]
        "target": ["nsis","zip"] // 目標包類型 
    },
    "nsis": {
    // 是否一鍵安裝，建議為 false，可以讓用戶點擊下一步、下一步、下一步的形式安裝程序，如果為true，當用戶雙擊構建好的程序，自動安裝程序并打開，即：一鍵安裝（one-click installer）
    "oneClick": false,
    // 允許請求提升。 如果為false，則用戶必須使用提升的權限重新啟動安裝程序。
    "allowElevation": true,
    // 允許修改安裝目錄，建議為 true，是否允許用戶改變安裝目錄，默認是不允許
    "allowToChangeInstallationDirectory": true,
    // 安裝圖標
    "installerIcon": "build/installerIcon_120.ico",
    // 卸載圖標
    "uninstallerIcon": "build/uninstallerIcon_120.ico",
    // 安裝時頭部圖標
    "installerHeaderIcon": "build/installerHeaderIcon_120.ico",
    // 創建桌面圖標
    "createDesktopShortcut": true,
    // 創建開始菜單圖標
    "createStartMenuShortcut": true,
    // electron中LICENSE.txt所需要的格式，并非是GBK，或者UTF-8，LICENSE.txt寫好之后，需要進行轉化，轉化為ANSI
    "license": "LICENSE.txt"
  },

　　另外推薦一個electron-build打包配置的博客：https://blog.csdn.net/liyu_ya/article/details/135282663

posted on 2025-02-06 23:20 Tom最好的朋友是Jerry 閱讀(1489) 評論(0) 收藏舉報

刷新頁面返回頂部

前言

創建electron項目（快捷指令，盡量不要先創建vue3項目再安裝electron并配置，超級麻煩且容易很多坑）

打包electron項目

package.json打包配置（如果通過快捷指令生成的項目會自動在json5或yml文件中配置）

創建electron項目（快捷指令，盡量不要先創建vue3項目再安裝electron并配置，超級麻煩且容易很多坑）