Electron 中的内置代码错误：无法在 'Document' 上执行 'querySelector'

Question

使用 Vite 构建应用程序，我在 Electron 中遇到以下错误：

index.c160f204.js:9 DOMException: Failed to execute 'querySelector' on 'Document': 'link[href="/C:UsersrankDocumentsSchoolCheckInElectronReaderdist/assets/Home.b0f26e4d.js"]' is not a valid selector.

在我看来，构建代码中的路径删除了斜杠，但我不知道如何解决这个问题，因为它是生成的代码。

在 Windows 11 10.0.22000 Build 22000

上使用 Node 17.9.0

电子main.js:

const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
        },
    });

    win.loadFile("dist/index.html");
}

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

    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit();
    }
});

电子preload.js:

window.addEventListener("DOMContentLoaded", () => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector);
        if (element) element.innerText = text;
    };

    for (const type of ["chrome", "node", "electron"]) {
        replaceText(`${type}-version`, process.versions[type]);
    }
});

Vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from "path";


// https://vitejs.dev/config/
export default defineConfig({
  base: path.resolve(__dirname, './dist'),
  plugins: [
    vue(),
  ],
})

使用 vue-tsc --noEmit && vite build 构建，electron . 开始。

Answer 1

如果您 copy/paste 将错误代码输入浏览器控制台，您会注意到 link 中 Users 和 rank 之间的非 UTF-8 字符。

摆脱它，它应该可以工作。

解决此问题的最简单方法是将项目移动到不包含奇怪字符的路径（例如：C:/projects/）

Electron 中的内置代码错误：无法在 'Document' 上执行 'querySelector'

Built code errors in Electron: Failed to execute 'querySelector' on 'Document'

vue.js

electron

vite