electron打包应用为桌面端

electron官网：https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-first-app

1.安装插件: 安装容易报错，最好开代理

npm install electron --save-dev

 2.在根目录创建main.js文件，main.js是打包的入口

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
// win.loadURL('http://127.0.0.1:4000/') // 启动该项目的服务地址
   win.loadFile('./dist/index.html') // 指向打包后的地址，使用vite需要build后再preview才能正常显示
}

app.whenReady().then(() => {
  createWindow()
})

3.package.json配置：此时你的package配置应该为此，执行npm run start能本地打包执行为桌面端，此操作不会输出exe文件

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jane Doe",
  "license": "MIT",
  "devDependencies": {
    "electron": "23.1.3"
  }
}

4.使用electron-forge打包输出exe文件，安装插件

npm install --save-dev @electron-forge/cli
npx electron-forge import

5.执行完npx后自动会添加forge.config.js文件，可以在forge.config.js可添加不同的配置打包出不同；并且此时package.json文件自动修改

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "description": "Hello World!",
  "author": "Lyle",
  "dependencies": {
    "electron-squirrel-startup": "^1.0.1",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@electron-forge/cli": "^7.4.0",
    "@electron-forge/maker-deb": "^7.4.0",
    "@electron-forge/maker-rpm": "^7.4.0",
    "@electron-forge/maker-squirrel": "^7.4.0",
    "@electron-forge/maker-zip": "^7.4.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
    "@electron-forge/plugin-fuses": "^7.4.0",
    "@electron/fuses": "^1.8.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "electron": "^31.0.1",
    "vite": "^4.0.0"
  }
}

6. 执行 npm run make则会自动打包在根目录的out文件夹中，make文件有setup文件，vue-project-win32-x64（可自己命名）有exe文件可执行

 补充：如果打包后还是白屏状态，删除对应的crossorigin字段，link同理，并且考虑打包后的资源地址是否正确，直接使用vite打包资源路径无法正确获取路径