李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

electron-vite 支持 vlc 播放器配置日志 ​

electron-vite 官方文档 https://cn-evite.netlify.app/

以下仅记录关键步骤 ​

1. 快速初始化项目 ​

console
node -v
v18.16.0
console
npm create @quick-start/electron my-app -- --template vue

2. 所有模块需改成 esm 格式 ​

差评 - 没有找到同时支持 esm 和 require 的方法

3. 配置多窗口 ​

github issues https://github.com/alex8088/electron-vite/issues/207

1. 添加 html 文件入口 ​

js
export default defineConfig({
  // ...
  renderer: {
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, "src/renderer/index.html"),
          "vlcplayer-back": resolve(__dirname, "src/renderer/vlcplayer-back.html"),
          vlcplayer: resolve(__dirname, "src/renderer/vlcplayer.html"),
        },
      },
    },
    resolve: {
      alias: {
        "@renderer": resolve("src/renderer/src"),
      },
    },
    plugins: [vue()],
  },
});

2. 入口文件需要增加 ./vlcplayer/renderer.js 渲染进程的入口 ​

vlcplayer.html

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body class="xgplayer-isplaying xgplayer-isloading">
    <!-- .... -->
    <script type="module" src="./vlcplayer/renderer.js"></script> 
  </body>
</html>

3. 重新运行项目，此时看项目根目录的 out 目录变化 ​

会出现这些文件

out\preload\vlcplayer.js
out\preload\vlcplayer-back.js
out\renderer\vlcplayer-back.html
out\renderer\vlcplayer.html

4. 主进程引入 preload 和 html 页面 ​

js
const instance = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    disableHtmlFullscreenWindowResize: true,
    preload: path.join(__dirname, "../preload/vlcplayer.js"), 
    sandbox: false, 
    backgroundThrottling: false,
  },
});
js
if (!app.isPackaged && process.env["ELECTRON_RENDERER_URL"]) {
  videoWindow1.loadURL(`${process.env["ELECTRON_RENDERER_URL"]}/vlcplayer-back.html`);
  videoWindow2.loadURL(`${process.env["ELECTRON_RENDERER_URL"]}/vlcplayer.html`);
} else {
  videoWindow1.loadFile(path.join(__dirname, "../renderer/vlcplayer-back.html"));
  videoWindow2.loadFile(path.join(__dirname, "../renderer/vlcplayer.html"));
}

4. electron addon C++ 插件例子 ​

https://cn-evite.netlify.app/guide/assets#导入原生-node-模块

github issues https://github.com/alex8088/electron-vite/issues/2#issuecomment-1103800729

https://nodejs.org/docs/latest/api/addons.html

1. 创建 hello 文件夹以及 hello.cc 文件， 内容如下 ​

创建 hello 文件夹

console
mkdir -p hello

切换到 hello/ 目录

cd hello

创建 hello.cc， 文件内容来自 Nodejs 官网 https://nodejs.org/docs/latest/api/addons.html#hello-world

c
// hello.cc
#include <node.h>

namespace demo {

using v8::FunctionCallbackInfo;
using v8::Isolate;
using v8::Local;
using v8::Object;
using v8::String;
using v8::Value;

void Method(const FunctionCallbackInfo<Value>& args) {
  Isolate* isolate = args.GetIsolate();
  args.GetReturnValue().Set(String::NewFromUtf8(
      isolate, "world").ToLocalChecked());
}

void Initialize(Local<Object> exports) {
  NODE_SET_METHOD(exports, "hello", Method);
}

NODE_MODULE(NODE_GYP_MODULE_NAME, Initialize)

}  // namespace demo

2. 创建 binding.gyp 文件，内容如下 ​

json
{
  "targets": [
    {
      "target_name": "addon",
      "sources": ["hello.cc"]
    }
  ]
}

3. 安装环境，如果已经有了对应环境可以跳过 ​

  • python
  • vs2022 c++桌面开发等环境配置
  • 安装 node
  • node-gyp
powershell
PS C:\Users\Administrator\Documents\vite-docs> python --version
Python 3.9.12
PS C:\Users\Administrator\Documents\vite-docs> node -v
v18.16.0
PS C:\Users\Administrator\Documents\vite-docs> node-gyp -v
v10.1.0
PS C:\Users\Administrator\Documents\vite-docs>

4. node-gyp 配置和编译 ​

Nodejs 官方文档 https://nodejs.org/docs/latest/api/addons.html#building

console
node-gyp configure
console
node-gyp bulid

5. 创建 hello.js ​

js
// hello.js
const addon = require("./build/Release/addon");

console.log(addon.hello());
// Prints: 'world'

6. 运行 hello.js ​

node hello.js

7. 初始化 package.json ​

npm init -y

8. 使用 electron-rebuild 重新构建 ​

console
npm i @electron/rebuild -D
json
 "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps && npm run vlc",
    "build:unpack": "npm run build && electron-builder --dir",
    "build:win": "npm run build && electron-builder --win",
    "build:mac": "npm run build && electron-builder --mac",
    "build:linux": "npm run build && electron-builder --linux",
    "addon": "electron-rebuild -f -m hello"
  },
console
npm run addon

9. 把 hello.node 拷贝到项目根目录的 resources 目录 ​

10. 在 electron-vite 项目中 src/main/index.js 中引入 ​

js
import addon from "../../resources/hello.node";

console.log("addon", addon);

11. 重新运行，会发现 控制台输出 addon c++插件信息 ​

5. 修改动态库依赖的路径 ​

DANGER

如果这里指定的dllPath错误或者有依赖项没有配置对应的依赖项，会导致动态库无法被加载出来

js
import { is } from "@electron-toolkit/utils";
import path from "path";
let dllPath = path.join(
  process.resourcesPath,
  "vlc-3.0.20-win64",
  "vlc-3.0.20"
);
// prettier-ignore
if (is.dev) { 
  dllPath = path.join(__dirname, "..", "..", "vlc-3.0.20-win64", "vlc-3.0.20"); 
} 
console.log("[vlcplayer dllPath]", dllPath);

// 解决找不到 libVLC.dll 问题
// 这里的PATH是电脑里面的环境变量
// 这么写相当于我们手动添加到环境变量中
// 使得应用启动的时候可以找到对应的dll
process.env.PATH = dllPath + ";" + process.env.PATH; 

import "./vlc-windows.js";