Electron-Vue3-Vite

今天这一篇文章算是electron的一个短暂的结尾，以后我们再更新electron 的知识。

今天的内容是项目的vue3+electron项目搭建和打包部署

一、Electron-Vue3-Vite搭建

1.创建模板

！！！兼容性注意

Vite 需要 Node.js版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

//使用npm
npm create vite@latest
//使用yarn
yarn create vite
//使用pnpm
pnpm create vite

使用以下命令启动：

npm i //安装依赖
npm run dev //启动项目

2.安装electron

npm i electron -D 

目前博主遇到了一个小问题，就是下载electron会一直卡住，这里使用如下方法就可以解决了。

npm install cnpm -g --registry=https://registry.npm.taobao.org //切换国内镜像源
cnpm isntall electron --save-dev

3.创建入口文件

根目录下创建

Main.js入口文件

//main.js
const { app,BrowserWindow } = require('electron')
const path = require('path')
const WinState = require('electron-win-state').default //保存窗口状态的包（窗口可以保存缩放、位置状态）

const createWindow = () => {
  const winState = new WinState({ 
    defaultWidth: 1000,
    defaultHeight: 800,
    // other winState options, see below
  })
    const win = new BrowserWindow({
      ...winState.winOptions,
      // width: 800,
      // height: 600,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js')
      }
    })
    win.loadURL('http://127.0.0.1:5173/') //加载本地端口，部署的时候可以换成我们的域名
    win.webContents.openDevTools() //打开控制台调试
    winState.manage(win)
  }

  app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  }) 

  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })

Preload.js预加载文件

//目前先不写内容，先搭个架子

配置package.json

//package.json
{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "nodemon --exec electron . --watch ./ --ext .js,.html,.vue,.css",
  },
  "dependencies": {
    "electron-win-state": "^1.1.22",
    "vue": "^3.2.41"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.2.0",
    "electron": "^21.3.1",
    "electron-builder": "^23.6.0",
    "nodemon": "^2.0.20",
    "vite": "^3.2.3"
  }
}

4.安装其他依赖

cnpm install nodemon --save-dev //安装nodemon
cnpm install electron-win-state --save-dev //安装electron-win-state

5.运行项目

npm run dev //启动vue项目
npm start //启动electron

我们现在就可以去开发我们的项目了

二、打包与部署

官网推荐我们的是Electron Forge来分发我们的应用程序

electron-forge 可以自动检测你的系统，然后打包成对应的可执行文件。
它可以实现 package 成最终可用的独立项目文件夹，
还可以 make 成能够安装的 zip 包

目前这个方法有一些问题，我们先用另一种方法来进行打包electron-build

根据文档我们也可以很快的掌握这种打包方式

1.安装依赖

cnpm i electron-builder -D //安装依赖

配置一下package.json

//package.json+
"scripts": {
  ...
  "app:dir": "electron-builder --dir",
  "app:dist": "electron-builder"
  ...
}

2.打包

cnpm run app:dist  //执行打包

目前我遇到打包错误的问题

如果我们遇到这种问题，我们切换一下npm镜像源就可以了；

现在我们打包就成功了

3.运行安装包

找到我们项目目录下的dist文件的.dmg安装包（我的是mac）

在运行之前，我们应该先将项目 运行 起来（因为我们是本地项目，等部署到服务器就不用了）

点击执行安装包

到目前为止，我们的electron的搭建->开发->打包就一气呵成了，当然，开发项目中还有许多奇奇怪怪的问题和知识点，就靠各位聪明的脑瓜了。。

参考链接：

[Electron官网]: “https://www.electronjs.org/docs/latest/tutorial/forge-overview “
[Vite.js官网]: “https://cn.vitejs.dev/ “
[electron-builder]: “https://github.com/electron-userland/electron-builder “