Electron 应用程序未找到包中包含的 CSS/JS

Question

我有一个通过 Electron 打包的 HTML5 网络应用程序。我正在通过 gulp-electron 打包。

我遇到的问题是，当构建应用程序并运行它时，没有加载 index.html 文件中引用的 CSS 或 JS 文件。

我可以看到资产已包含在构建中，并且是 .app 包的一部分，位于：myapp.app/Contents/Resources/app/ 文件夹中。

事实上，如果我 cd 到该目录并运行节点网络服务器 (httpster)，应用程序以这种方式运行良好。

以下是我的 CSS/JS 的引用方式：

<!-- CSS -->
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="./styles/style.css" />
<link rel="stylesheet" href="./bower_components/angular-ui/build/angular-ui.min.css" type="text/css" media="screen">

<!-- Vendors -->
<script type="text/javascript" src="./js/nonangular/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/nonangular/jquery-1.11.2.min.js"></script>

<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./bower_components/angular-ui/build/angular-ui.min.css" type="text/css" media="screen">


<!-- Non-angular libraries -->
<script type="text/javascript" src="./js/nonangular/lodash.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>

<!-- Angular external libraries for application -->
<script type="text/javascript" src="./node_modules/angular/angular.js"></script>
<script type="text/javascript" src="./node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="./node_modules/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="./node_modules/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-ui/build/angular-ui.min.js" type="text/javascript"></script>
<script src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js" type="text/javascript" charset="utf-8"></script>

<script src="./bower_components/angular-activity-monitor/activity-monitor.min.js" type="text/javascript"></script>

<!-- Angular components -->
<!-- build:appcomponents js/appcomponents.js -->
<script type="text/javascript" src="./js/app.js"></script>
<script type="text/javascript" src="./js/config.js"></script>
<script type="text/javascript" src="./components/directives/main.nav.directive.js"></script>

<!-- Application sections -->
<!-- build:mainapp js/mainapp.js -->
<script type="text/javascript" src="./js/controller.js"></script>
<script src="./components/main/mainController.js" type="text/javascript" charset="utf-8"></script>

我已尝试将路径更改为在引用的文件夹无效之前不包含“./”。

我的 Gulpfile 电子任务如下所示：

gulp.task('electron', function() {

  gulp.src("")
    .pipe(electron({
      src: './app',
      packageJson: packageJson,
      release: './release',
      cache: './cache',
      version: 'v0.36.10',
      packaging: true,
      platforms: ['win32-ia32', 'darwin-x64'],
      platformResources: {
        darwin: {
          CFBundleDisplayName: packageJson.name,
          CFBundleIdentifier: packageJson.name,
          CFBundleName: packageJson.name,
          CFBundleVersion: packageJson.version,
          icon: './app/gulp-electron.icns'
        },
        win: {
          "version-string": packageJson.version,
          "file-version": packageJson.version,
          "product-version": packageJson.version,
          "icon": './app/gulp-electron.ico'
        }
      }
    }))
    .pipe(gulp.dest(""));
});

我的应用文件夹结构如下：

令人沮丧的是，我在另一个项目中使用了这种精确的设置，并且可执行文件工作正常，并且能够很好地访问捆绑在 .app 包中的所有资产。

Answer 1

原来路径存在一些问题。

首先，CSS 使用相对路径来引用图像。将其切换到绝对路径就可以了。对于指令来说，这也是同样的问题。用绝对路径切换相对路径就可以了。

最后，实际没有加载的 CSS 和 JS 文件看起来是因为在主 index.html 中有这样的：

    <base href="/">

这是在搞砸事情。删除允许 CSS 和 JS 正确加载。

Answer 2

Electron 通过 file:// 协议访问文件，因此任何基本 href 都应以 '.' 开头

为了让它工作，在 index.html 中（如果'/'是你的基本href） 改变

<base href="/"> 

进入

<base href="./">

..路径错误会消失。

所以对于电子应用程序，我们总是需要使用以'.'开头的基本href来编译角度分布，当/是你的基础时，编译为

ng buid --prod --base-href ./

Answer 3

我终于明白在 Electron 中包含静态文件有什么问题

<link rel="stylesheet" href="./app/css/app.css">
<link rel="stylesheet" href="./app/libs/mdl/material.min.css">

这不起作用，因为它们包含在我的 index.html 中，它不在根文件夹中。

它在"app/html/index.html"，所以我必须告诉 Electron 我的项目的根在哪里！

只需在包含脚本的 index.html 文件顶部添加 <base href="../../">

对我来说 我必须返回 2 个文件夹才能找到项目的根目录。在你的情况下，它可能会更少（../ then）或更多（../../../ then）等等

Answer 4

我发现你需要插入以“../”开头的href：

<link rel="stylesheet" type="text/css" href="../src/css/index.css"/>