随笔 - 73, 文章 - 0, 评论 - 6, 阅读 - 91824

前言

　　做桌面端用了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"
  },