vite+electron开发桌面端应用一

利用vite+electron脚手架开发一个简单的桌面端应用

• 下载脚手架

npm create vite 输入指令后选择vue或者react等直接选择最下面的other，之后会有electron选项，之后会使用 npm install 下载依赖，运行后，如果运行不起来，删除node_modules重新进行下载即可

简单的介绍下

• 跟src有个同级的目录electron,electron下有个main.ts这个文件是主要的文件，修改桌面端页面或者配置啥的，都可以在这里配置（可配置顶部的菜单显不显示，配置菜单，当前默认窗口的视口大小，是否居中显示等）
• electron-->main.ts

function createWindow() {

  //部分代码
 if (VITE_DEV_SERVER_URL) {
    //加载链接（我们可以直接将h5的项目链接放到这里）
    win.loadURL(VITE_DEV_SERVER_URL)
  } else {
    //加载文件 
    // win.loadFile('dist/index.html')
    win.loadFile(path.join(process.env.DIST, "index.html"))
  }
  //捕获a标签的打开事件，使用系统浏览器打开，并阻止新窗口打开
  win.webContents.setWindowOpenHandler((details) => {
    shell.openExternal(details.url)
    //action:deny 拒绝electron新建窗口打开
    //action:allow 允许electron新建窗口打开
    return { action: "deny" }
  })
  //开发的时候，打开调试面板进行调试
  win.webContents.openDevTools()
}

• electron-builder.json5 这个是打包配置的一些文件主要是nsis配置

 nsis: {
    oneClick: false,
    perMachine: false,
    createDesktopShortcut: true,//是否允许创建桌面的快捷方式
    allowToChangeInstallationDirectory: true,
    deleteAppDataOnUninstall: true,
  },```
* src 下的文件就是我们可以根据正常的vue中的进行开发项目

* 说下打包之后安装的问题
* 直接使用npm run build 进行打包，之后会在根目录中生成一个release目录，这个就是我们可以在桌面安装的