Почему в electron-builder ссылки на svg имеют не верный путь?

Question

[Евгений Запунный]

это ссылка при electron:serve
background-image: url(localhost:8080/img/arabian.29710604.svg);

ссылка в electron:build
background-image: url(df-installer-beta/img/arabian.29710604.svg);

а должна быть
background-image: url(df-installer-beta://./img/arabian.29710604.svg);

const express = require('express');
const {resolve} = require('path');

const chanel = process.env.VUE_APP_BUILD_CHANEL;

const appName = `name-installer-${chanel}`;

const oneClick = false;
const nsisOptions = {
    oneClick,
    perMachine: !oneClick,
    allowToChangeInstallationDirectory: true,
    preCompressedFileExtensions: [],
    deleteAppDataOnUninstall: true,
    displayLanguageSelector: true,
    installerLanguages: ['en', 'ru'],
    warningsAsErrors: false,
};

let styles = `
@import "~@/styles/base.scss";
@import "~@/styles/transitions.scss";
@import "~@/styles/buttons.scss";
`;

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                additionalData: styles,
            },
        },
    },
    configureWebpack: {
        devServer: {
            onBeforeSetupMiddleware: (devServer) => {
                if (process.env.NODE_ENV !== 'production') {
                    devServer.app.use(
                        '/extraResources/',
                        express.static(
                            resolve(__dirname, 'src', 'extraResources'),
                        ),
                    );
                }
            },
        },
    },
    pluginOptions: {
        electronBuilder: {
            outputDir: `dist_${chanel}`,
            customFileProtocol: `${appName}://./`,
            preload: `src/preload.ts`,
            nodeIntegration: false,
            builderOptions: {
                appId: 'com.name.installer',
                productName: `Name Installer`,
                protocols: {
                    name: appName,
                    role: 'Viewer',
                    schemes: [appName],
                },
                win: {
                    icon: 'public/icon.ico',
                    target: [
                        {
                            target: 'portable',
                            arch: ['x64'],
                        },
                    ],
                    publisherName: 'Name FZ-LLC',
                },
                nsis: nsisOptions,
                nsisWeb: nsisOptions,
            },
        },
    },
};

Answer 1

[Владимир Кусакин]

Проблема, с которой вы столкнулись, кажется связана с настройками сборки Electron и особенно с конфигурацией пути к ресурсам в вашем приложении. В Electron для указания путей к ресурсам можно использовать как абсолютные, так и относительные URL. В вашем случае, кажется, что electron-builder не корректно обрабатывает путь к ресурсам после сборки приложения.

При использовании electron:serve, локальный сервер разработки предоставляет ресурсы по прямым ссылкам, что и отображается в вашем CSS как url(localhost:8080/img/arabian.29710604.svg). Это стандартное поведение для среды разработки.

Однако, когда вы переходите к сборке приложения с помощью electron:build, структура путей изменяется. electron-builder пытается адаптировать пути к файлам так, чтобы они были доступны внутри пакета приложения, но в вашем случае, похоже, формируется некорректный путь.

Ваша конечная цель — чтобы путь был вида df-installer-beta://./img/arabian.29710604.svg, что указывает на использование пользовательского протокола, заданного в customFileProtocol. Однако, генерируется путь df-installer-beta/img/arabian.29710604.svg, без указания протокола и слешей, что делает его невалидным.

Возможные решения
1) Убедитесь в корректности настройки customFileProtocol: В вашем конфиге customFileProtocol выглядит корректно. Однако, стоит убедиться, что эта настройка правильно используется при загрузке ресурсов. Это означает, что ваши ссылки на ресурсы должны явно использовать этот протокол.

2) Проверка путей в сборке: Удостоверьтесь, что пути к ресурсам корректно обрабатываются в процессе сборки. Возможно, вам придется вручную настроить пути в сборке, чтобы они соответствовали ожидаемому формату.

3) Использование __dirname или __static для указания абсолютных путей: В контексте Electron, вы можете использовать __dirname в main process или __static (если он доступен через вашу конфигурацию electron-builder) для указания абсолютного пути к вашим статическим ресурсам.

4) Проверка настроек Webpack: Убедитесь, что настройки Webpack корректно обрабатывают пути к вашим ресурсам. Это может потребовать настройки publicPath или использования специальных loader'ов, которые учитывают особенности загрузки ресурсов в Electron.

Эти шаги должны помочь вам настроить корректную обработку путей к SVG-файлам в вашем Electron-приложении.