vue项目打包为Electron桌面端程序

1.tips

1. 项目可能需要较高版本 node 支持，本人使用的 node 版本为 16+，14+以上应该就可以
2. 由于是脚手架插件，需要安装 vue 脚手架，npm install -g @vue/cli

   2.项目模板选择

• 尝试过使用 vite 创建的 vue3 项目进行打包，会报错，后面直接使用了 cli 创建的项目可以打包

• vueCli 创建项目：vue create xxx （xxx 是你项目的名称）

  3.插件安装与配置

  1.安装打包工具

  // 再项目中
  vue add electron-builder

  2.配置镜像源

• 下载是访问国外地址，不配置可能会下载不成功

• 可以在 C:\Users 中找到 .npmrc 文件查看源地址是否配置成功

  npm config set registry http://registry.npm.taobao.org/
  npm config set electron_mirror="https://npm.taobao.org/mirrors/electron/"
  npm config set electron_builder_binaries_mirror="http://npm.taobao.org/mirrors/electron-builder-binaries/"

  3.proxy 需要去除，修改 Axios 中的 地址为完整 url 地址

1. 打包后的 Electron 使用 Proxy 配置的代理会失效，所以不能在 vue.config.js中使用 Proxy 做代理进行转发。发送 Axios 请求也需要使用完整的 url 路径

   4.打包

• 执行：npm run electron:build 打包命令

  5.跨域访问失效问题

• 打包后的项目中会增加一个 background.js 是 electron 的主线程，在 webPreferences 中，添加代码，webSecurity: false ，关闭跨域检查

  async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 关闭 web 跨域检查,允许跨域
      webSecurity: false,
      // 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,
    },
  })

  6.重新打包

• 执行命令：npm run electron:build，打包好的项目中会有一个 dist_electron 文件夹，双击进入，.exe 就是桌面端应用，双击安装即可

  7.一个基于vue构建electron应用程序的模板

• [x] electron-vue 下载 demo 看了看，后期有机会在学习