electron提交

.env.production

@@ -2,5 +2,5 @@
 NODE_ENV='production'
 
 # 代理前缀
-VITE_APP_BASE_API = '/prod-api'
+VITE_APP_BASE_API = 'http://192.168.1.3:8082'
 

.npmrc

+ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

electron-builder.json

+{
+  "appId": "com.electron.desktop",
+  "productName": "electron",
+  "asar": true,
+  "copyright": "Copyright © 2022 electron",
+  "directories": {
+    "output": "release"
+  },
+  "files": [
+    "dist",
+    "dist-electron"
+  ],
+  "mac": {
+    "artifactName": "${productName}_${version}.${ext}",
+    "target": ["dmg"]
+  },
+  "win": {
+    "target": ["nsis"]
+  },
+  "nsis": {
+    "oneClick": false,
+    "perMachine": false,
+    "allowToChangeInstallationDirectory": true,
+    "deleteAppDataOnUninstall": false,
+    "artifactName": "${productName}_${version}.${ext}"
+  },
+  "publish": [
+    {
+      "provider": "generic",
+      "url": "http://127.0.0.1:8080"
+    }
+  ],
+  "releaseInfo": {
+    "releaseNotes": "版本更新的具体内容"
+  }
+}

electron/index.ts

+import { app, BrowserWindow } from "electron";
+import path from "path";
+
+const createWindow = () => {
+  const win = new BrowserWindow({
+    webPreferences: {
+      // 允许渲染进程使用node
+      contextIsolation: false,
+      nodeIntegration: true,
+      //关闭web权限检查，允许跨域
+      webSecurity: false,
+    },
+  });
+  win.webContents.openDevTools();
+  // app.isPackaged 字段存在bug，即使正常打包后，仍然为false，所以不能用来判断项目是否经过打包
+  if (process.env.NODE_ENV === "development") {
+    // 开发环境
+    // process.env.VITE_DEV_SERVER_URL获取开发服务器的url
+    // vite版本不同，VITE_DEV_SERVER_URL字段也有所变化，打印process.env查找具体的名称
+    win.loadURL(process.env.VITE_DEV_SERVER_URL);
+  } else {
+    // 生产环境
+    win.loadFile(path.join(__dirname, "../dist/index.html"));
+  }
+};
+
+app.whenReady().then(createWindow);

package.json

@@ -2,7 +2,8 @@
   "name": "vue3-element-admin",
   "version": "2.8.2",
   "private": true,
-  "type": "module",
+  "type": "commonjs",
+  "main": "dist-electron/index.js",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "vite serve --mode development",
@@ -12,7 +13,11 @@
     "lint:prettier": "prettier --write \"**/*.{js,cjs,ts,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint  \"**/*.{css,scss,vue}\" --fix",
     "lint:lint-staged": "lint-staged",
-    "commit": "git-cz"
+    "commit": "git-cz",
+    "dev_electron": "cross-env NODE_ENV=development vite",
+    "build_electron_win": "vite build --mode production && electron-builder --win",
+    "build_electron_mac": "vite build --mode production && electron-builder --mac",
+    "preview11": "vite preview"
   },
   "config": {
     "commitizen": {
@@ -88,7 +93,10 @@
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.16",
     "commitizen": "^4.3.0",
+    "cross-env": "^7.0.3",
     "cz-git": "^1.8.0",
+    "electron": "^29.0.0",
+    "electron-builder": "^24.12.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-import": "^2.29.1",
@@ -115,6 +123,7 @@
     "unplugin-icons": "^0.16.6",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^5.0.11",
+    "vite-plugin-electron": "^0.28.2",
     "vite-plugin-mock-dev-server": "^1.4.5",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^1.8.27"

src/api/dict/index.ts

 import request from "@/utils/request";
 import { AxiosPromise } from "axios";
+import Qs from "qs";
 import {
   DictTypeQuery,
   DictTypePageResult,
@@ -40,14 +41,14 @@ export function listType(query: any) {
   });
 }
 /** 查询字典类型详细*/
-export function getType(dictId) {
+export function getType(dictId: any) {
   return request({
     url: "/system/dict/type/detail/" + dictId,
     method: "get",
   });
 }
 // 修改字典数据
-export function updateData(data) {
+export function updateData(data: any) {
   const businessId = data.businessId;
   return request({
     url: "/system/dict/data/update/" + businessId,
@@ -73,7 +74,7 @@ export function exportType(queryParams: DictTypeQuery) {
   });
 }
 // 下载字典数据导入模板
-export function importTemplate(query) {
+export function importTemplate(query: any) {
   return request({
     url: "/system/dict/data/importTemplate",
     method: "get",
@@ -82,7 +83,7 @@ export function importTemplate(query) {
   });
 }
 //导入字典数据信息
-export function importExcel(data) {
+export function importExcel(data: any) {
   return request({
     url: "/system/dict/data/importDictData",
     method: "post",
@@ -98,7 +99,7 @@ export function importExcel(data) {
   });
 }
 // 下载错误文件
-export function uploadFalseFile(params) {
+export function uploadFalseFile(params: any) {
   params = Qs.stringify(params);
   return request({
     url: "/system/user/downFalseFile",
@@ -108,7 +109,7 @@ export function uploadFalseFile(params) {
   });
 }
 // 导出字典数据
-export function exportData(query) {
+export function exportData(query: any) {
   return request({
     url: "/system/dict/data/export",
     method: "get",
@@ -127,7 +128,7 @@ export function updateType(data: any) {
   });
 }
 // 新增字典数据
-export function addData(data) {
+export function addData(data: any) {
   return request({
     url: "/system/dict/data/add",
     method: "post",
@@ -157,7 +158,7 @@ export function getDictTypeForm(dictId: number): AxiosPromise<DictTypeForm> {
   });
 }
 // 4.查询字典数据详细
-export function getData(dictCode) {
+export function getData(dictCode: any) {
   return request({
     url: "/system/dict/data/detail/" + dictCode,
     method: "get",
@@ -200,7 +201,7 @@ export function deleteDictTypes(dictId: string) {
   });
 }
 /** 删除字典数据*/
-export function delData(dictCode) {
+export function delData(dictCode: any) {
   return request({
     url: "/system/dict/data/deleteLogical/" + dictCode,
     method: "delete",

vite.config.ts

 import vue from "@vitejs/plugin-vue";
 import { UserConfig, ConfigEnv, loadEnv, defineConfig } from "vite";
-
+import electron from "vite-plugin-electron";
 import AutoImport from "unplugin-auto-import/vite";
 import Components from "unplugin-vue-components/vite";
 import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
@@ -64,6 +64,10 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       vue(),
       // MOCK 服务，开启 MOCK 放开注释即可
       // mockDevServerPlugin(),
+      electron({
+        // 入口文件
+        entry: "electron/index.ts",
+      }),
       vueJsx(),
       UnoCSS({
         hmrTopLevelAwait: false,