electron

一、Vue3+ts项目中使用electron

1、安装依赖

#安装electron
npm install electron -D
#安装在vite中使用插件electron
npm install vite-plugin-electron -D

2.创建文件electron/index.ts 并输入如下代码

import {app,BrowserWindow} from 'electron'
import path from 'path'
const createWindow = ()=>{
  const win = new BrowserWindow({
    webPreferences:{
      nodeIntegration:true,
      contextIsolation:false
    }
  })
  //打包后走加载文件路径
  if(app.isPackaged){
    win.loadFile(path.join(__dirname,"../dist/index.html"))
  }else{
    win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)
  }

}
app.whenReady().then(createWindow);

3.vite.config.ts 中引入插件

//引入vite-plugin-electron 这个文件自带的import别删
//留下一条为了明显看到
import electron from 'vite-plugin-electron'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),electron({
      //入口
      entry:'electron/index.ts'
  })],
    //这个是代理不要管
  server:{
    proxy:{
      '/api':{
         target:'http://localhost:3000',
         changeOrigin:true,
         rewrite:(path)=>path.replace(/^\/api/,'')
      }
    }
  }
})

4.修改package.json

• 删除已有的 “type”:“modile”
• 添加 “main”:“dist-electron/index.js”

{
  "name": "time",
  "private": true,
  "version": "0.0.0",
  "main": "dist-electron/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "electron": "^23.1.1",
    "electron-builder": "^23.6.0",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vite-plugin-electron": "^0.11.1",
    "vite-plugin-electron-renderer": "^0.12.1",
    "vue-tsc": "^1.0.24"
  }
}

二、electron-builder打包

1.安装electron-builder

npm install electron-builder -D

2.修改配置文件package.json

在scrpits下build中添加&&electron-builder

{
  "name": "time",
  "private": true,
  "version": "0.0.0",
  "main": "dist-electron/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build&& electron-builder",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "electron": "^23.1.1",
    "electron-builder": "^23.6.0",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vite-plugin-electron": "^0.11.1",
    "vite-plugin-electron-renderer": "^0.12.1",
    "vue-tsc": "^1.0.24"
  }
}

3.在根目录添加文件 electron-builder.json5

{
  "appId": "YourAppID",//这是你的app的id
  "asar": true,//是否在打包完成后展示打包代码
  "directories": {
    "output": "release/" 
  },
  "files": [//本地文件地址
    "dist",
    "dist-electron"//如果没有这个一定要加上不然有可能打包不成功进行报错
  ],
  "mac": {
    "artifactName": "${productName}.${ext}",
    "target": [
      "dmg"
    ]
  },
  "win": {
    "target": [
      {
        "target": "nsis",
        "arch": [
          "x64"
        ]
      }
    ],
    "artifactName": "${productName}.${ext}"
  },
  "nsis": {
   "oneClick": false, // 创建一键安装程序还是辅助安装程序
    "allowElevation": true, 
    "allowToChangeInstallationDirectory": true, // 是否允许修改安装目录 
    // "installerIcon": "public/time.svg",// 安装程序图标的路径
    // "uninstallerIcon": "public/time.svg",// 卸载程序图标的路径
    // "installerHeader": "public/time.svg", // 安装时头部图片路径（仅作用于辅助安装程序）
    // "installerHeaderIcon": "public/time.svg", // 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序）
    "uninstallDisplayName": "${productName}", // 控制面板中的卸载程序显示名称
    "createDesktopShortcut": true, // 是否创建桌面快捷方式
    "createStartMenuShortcut": false,// 是否创建开始菜单快捷方式
    "shortcutName": "${productName}", // 用于快捷方式的名称，默认为应用程序名称
    "deleteAppDataOnUninstall": false, // 是否在卸载时删除应用程序数据
    "runAfterFinish": true,  // 完成后是否运行已安装的应用程序
    "menuCategory": false, // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为true，则使用公司名称
  }
}

4.打包安装

npm run build

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

true, // 完成后是否运行已安装的应用程序
“menuCategory”: false, // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为true，则使用公司名称
}
}

4.打包安装

```shell 
npm run build

release文件下.exe文件安装