1

我想在我的 Raspberry Pi 上基于此示例使用 Electron 运行 Angular 应用程序。该应用程序在我的 PC 上运行良好，npm start但无法解析 Pi 上的资产。

资产theme.scss在目录中的文件中定义src/：

$body-background-color: white;
$body-background-image: url("/assets/images/bg-hexa-gray-flat.png");
$body-background-position: top left;
$body-background-repeat: repeat;

$sidepanel-background-color: white;
$sidepanel-background-image: url("/assets/images/bg-hexa-red-flat.png");
$sidepanel-background-position: top left;
$sidepanel-background-repeat: repeat;

$sidepanel-logo:       url("/assets/svg/logo.svg");
$sidepanel-logo-white: url("/assets/svg/white.svg");

这个文件被导入到我的大部分组件中。

我的main.ts文件：

import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as url from 'url';

let win: BrowserWindow = null;
const serve = process.argv.slice(1).some(val => val === '--serve');

const createWindow = async () => {

  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 480,
    icon: path.join(__dirname, 'src/assets/images/icon.png'),
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: (serve) ? true : false,
    },
  });

  if (serve) {
    require('electron-reload')(__dirname, {
      electron: require(`${__dirname}/node_modules/electron`)
    });
    win.loadURL('http://localhost:4200');
  } else {
    win.setFullScreen(true);
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'dist/index.html'),
      protocol: 'file:',
      slashes: true
    }));
  }

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store window
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });

  return win;
};

try {

  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on('ready', createWindow);

  // Quit when all windows are closed.
  app.on('window-all-closed', () => app.quit());

} catch (e) {
  // Catch Error
  // throw e;
}

问题是serve在我的电脑上，/assets路径是相对于应用程序的根目录（http://localhost:4200/assets/..），它工作正常，但在 prod 中我得到一个file:///assets/...未找到的错误。如果我将 Pi 上捆绑包的 CSS 中的路径从/assets/...更改为assets/...它可以工作。如果我在theme.scss文件中相应地更改它，它不会编译，因为路径是相对的，并且theme.scss在文件树的不同级别的许多组件中导入。

我已经尝试过类似的路径，~/assets/...但它被编译为/./assets/...，这对我来说毫无意义......

如何在 CSS 包中生成或在编译时将其解析为相对于应用程序根目录/assets？assets/assets/

编辑：

资产的解析是Angularurl()的一个老问题。

4

0 回答 0