Electron系列 -- vue项目嵌套electron打包成桌面应用(上)

目录

一. 基于搭建好的vue项目, 全局安装Electron

添加electron

添加Electron-builder打包工具, 直接回车即可

安装完毕, 会发现目录里多了一个 background.js 的文件，并且 package.json 里多了依赖和执行命令, 其中这个“main”: “background.js” 是 electron 的入口文件

二. 测试, 打包

三. 项目打包其他配置( 应用名称 、安装流程相关)

 附上我项目运用上的配置,供参考

四. 常见问题

1.项目启动速度较慢, 在background.js中, 注释掉这段代码

 2.跨域问题 ,加上此配置 webSecurity: false, 根据需要窗口调整大小

 3..electron build 打包时，背景图片失败，background-image: url 被转换成 app:///img/

 4.electron 打包后, 请求地址变成了app://开头 

5.桌面应用图标默认图标,更改为自定义图标

---

一. 基于搭建好的vue项目, 全局安装Electron

添加electron

npm install electron -g  全局安装

cnpm install electron --save-dev 局部安装

添加Electron-builder打包工具, 直接回车即可

vue add electron-builder

安装完毕, 会发现目录里多了一个 background.js 的文件，并且 package.json 里多了依赖和执行命令, 其中这个“main”: “background.js” 是 electron 的入口文件

二. 测试, 打包

在package.json 会生成electron启动 和打包命令

npm run serve    网页运行
 
npm run electron:serve   网页运行并打开客户端运行
 
npm run electron:build   构建打包客户端-会在根目录生成dist_electron文件夹
                         其中的XXX Setup XXX.exe就是安装包

三. 项目打包其他配置( 应用名称 、安装流程相关)

根目录下 vue.config.js 文件
引入的图片文件大小必须是 256\*256 的
然后这个 build 的目录在项目根目录下创建，图片放进去就行
```

参照表
"build": {
"productName":"xxxx", //项目名 这也是生成的 exe 文件的前缀名
"appId": "com.xxx.xxxxx", //包名
"copyright":"xxxx", //版权信息
"directories": { //输出文件夹
"output": "build"
},
"nsis": { //nsis 相关配置，打包方式为 nsis 时生效
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升，如果为 false，则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "./build/icons/aaa.ico", // 安装图标
"uninstallerIcon": "./build/icons/bbb.ico", //卸载图标
"installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true, // 创建开始菜单图标
"shortcutName": "xxxx", // 图标名称
"include": "build/script/installer.nsh", // 包含的自定义 nsis 脚本
},
"publish": [
{
"provider": "generic", // 服务器提供商，也可以是 GitHub 等等
"url": "http://xxxxx/" // 服务器地址
}
],
"win": {
"icon": "build/icons/aims.ico",
"target": [
{
"target": "nsis", //使用 nsis 打成安装包，"portable"打包成免安装版
"arch": [
"ia32", //32 位
"x64" //64 位
]
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"linux": {
"icon": "build/icons"
}
}

```

 附上我项目运用上的配置,供参考

// electron相关配置
  pluginOptions: {
    electronBuilder: {
      customFileProtocol: "./", //解决背景图片异常问题
      builderOptions: {
        productName: "xxx系统", //项目名（exe 文件的前缀名)
        nsis: {
          allowToChangeInstallationDirectory: true, //自定义安装路径
          oneClick: false, //是否一键安装
          createDesktopShortcut: "always", // 是否添加桌面快捷方式
          installerIcon: "./build/icons/icon.ico",
          uninstallerIcon: "./build/icons/icon.ico",
          uninstallDisplayName: "卸载xxx系统",
          shortcutName: "xxx系统", // 图标名称
        },
      },
    },
  },

 配置完成后, 应用名称, 版本号等界面灵动化

四. 常见问题

1.项目启动速度较慢, 在background.js中, 注释掉这段代码

app.on("ready", async () => {
  // if (isDevelopment && !process.env.IS_TEST) {
  //   // Install Vue Devtools
  //   try {
  //     await installExtension(VUEJS_DEVTOOLS)
  //   } catch (e) {
  //     console.error('Vue Devtools failed to install:', e.toString())
  //   }
  // }
  createWindow();
});

 2.跨域问题 ,加上此配置 webSecurity: false, 根据需要窗口调整大小

 const win = new BrowserWindow({
    width: 1200,
    height: 1080,
    // autoHideMenuBar: true, // 隐藏菜单栏
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION, // 禁用上下文隔离
      webSecurity: false, //关闭安全策略, 解决跨域问题
     
    },
  });
win.maximize();//实现窗口最大化

 3..electron build 打包时，背景图片失败，background-image: url 被转换成 app:///img/

通过在 vue.config.js 中添加 customFileProtocol，再次打包成功！

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({

pluginOptions: {
electronBuilder: {
customFileProtocol: "./", //解决背景图片异常问题
},
},
});

 4.electron 打包后, 请求地址变成了app://开头 

这种情况,解决方式很简单, 写死即可 

思路: 将请求地址定义在.env.xxx的配置文件中, 通过不同的环境来编译, 测试环境 ,开发环境正常用代理, 生产环境写死地址 

5.桌面应用图标默认图标,更改为自定义图标

electron-icon-builder 是一个生成图标的包

 安装 electron-icon-builder

npm install electron-icon-builder --save-dev

package.json 中配置命令

"scripts": {
  "electron:generate-icons": "electron-icon-builder --input=./public/favicon.png --output=build --flatten"
},

执行命令, 生成icon

npm run electron:generate-icons

完成后会在根目录多出来一个build目录

在vue.config.js 中, 也要将路径进行调整 ./build/icons/icon.ico

删除原来的dist_electron，重新打包，安装后就是新图标了