electron-vite-vue实战

electron-vite-vue实战

electron-vite-vue介绍

electron-vite-vue提供 Electron + Vite+VUE 结合的最佳社区实践方案！它使得基于 VUE 开发的 Electron 工程变得十分简单！

官网：Why Electron⚡️Vite | Electron⚡️Vite

github：electron-vite/electron-vite-vue: Really simple Electron + Vite + Vue boilerplate.

electron-vite-vue使用

本文涉及版本

"vue": "^3.4.21",
"vue-router": "^4.0.13"
"electron": "^30.0.1",
"electron-builder": "^24.13.3",
"vite": "^5.1.6",
"vite-plugin-electron": "^0.28.6",

创建项目

npm create vite@latest my-electron-vite-project

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
❯   Others

? Select a variant: › - Use arrow-keys. Return to submit.
    create-vite-extra ↗
❯   create-electron-vite ↗

# Choose your preferred front-end framework language
? Project template: › - Use arrow-keys. Return to submit.
❯   Vue
    React
    Vanilla

# Enter the project to download dependencies and run them
cd my-electron-vite-project
npm install
npm run dev

项目目录介绍

• electron：electron 主进程文件和预编译文件
• public：公共静态资源，软件logo等
• src：VUE具体代码
• electron-builder.json5：打包配置

打包

npm run build

打包常用配置

package.json

{
...
  "version": "v1.0.0", //软件版本
...
}

electron-builder.json5

{
  ...
  "appId": "com.xxx.xxx", //APPID
  "asar": true, //是否使用asar压缩，能减少打包体积
  "productName": "APP", //软件名称
  "mac": {
    "target": [
      "dmg"
    ],
    "artifactName": "${productName}-Mac-${version}-Installer.${ext}"//安装包名称
  },
  "win": {
    "icon":"./public/logo.png",//安装包图标
    "target": [
      {
        "target": "nsis",
        "arch": [
          "x64"
        ]
      }
    ],
    "artifactName": "${productName}-Windows-${version}-Setup.${ext}"//安装包名称
  },
  "nsis": {
    "oneClick": false,
    "perMachine": false,
    "allowToChangeInstallationDirectory": true,
    "deleteAppDataOnUninstall": false
  },
  "linux": {
    "target": [
      "AppImage"
    ],
    "artifactName": "${productName}-Linux-${version}.${ext}"//安装包名称
  }
}

electron/main.ts

win = new BrowserWindow({
    ...
    icon: path.join(process.env.VITE_PUBLIC, "electron-vite.svg"),//软件左上角logo
    ...
  });

常见问题

打包后图片地址错误

图片在本地能正常访问，打包后找不到是因为打包后图片地址会发生改变，可以将图片放在public下通过主进程获取软件路径来访问。

electron/main.ts

//process.env.VITE_PUBLIC是electron-vite-vue预先定义好的

//获取图片路径地址
ipcMain.on("getImageUrl", (_, image) => {
  _.returnValue = path.join(process.env.VITE_PUBLIC, image);
});

preload.ts

contextBridge.exposeInMainWorld("myAPI", {
  getImageUrl(image: string) {
    const resp = ipcRenderer.sendSync("getImageUrl", image);
    return resp;
  },
});

页面

使用这个方法可能会出现本地访问图片Not allowed to load local resource: 的错误，这是因为electron出于安全考虑，默认情况下浏览器环境（包括Electron的渲染进程）不允许直接访问本地文件系统，可以在本地环境关闭这个设置。

main.ts

win = new BrowserWindow({
	...
    webPreferences: {
       //本地测试使用，禁用Web安全设置
       webSecurity: false,
    },
  });

打包后启动软件显示白板

这一般是vue-router引起的，electron只能使用hash模式的路由

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

渲染进程本地使用预编译正常，打包报错

报错提示：

• 属性“myAPI”在类型“Window & typeof globalThis”上不存在。你是否指的是“Map”?
• 类型“IpcRenderer”上不存在属性“getImageUrl”

解决方法：在src下创建global.d.ts来自定义Window的API

// global.d.ts

declare global {
  interface Window {
    myAPI: {
      // 定义你暴露给渲染进程的方法和属性
      openDevTools: () => void;
      getStoreValue: (key: string) => string; // 返回值可能是 undefined 如果 key 不存在
      setStoreValue: (key: string, value: string) => void; // 确保参数类型明确
      deleteStore: (key: string) => void;
      getImageUrl: (image: string) => string;
    };
  }
}

export {}; // 确保这是一个模块，而不是命名空间