Electron应用程序未找到包中包含的CSS / JS [英] Electron app isn't finding CSS/JS included in package

问题描述

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

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

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

事实上，如果我转到该目录并运行一个节点web服务器（httpster），该应用可以以这种方式正常运行。

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

 <！ -  CSS  - >< link rel =stylesheethref =./ bower_components / bootstrap / dist / css / bootstrap.min.csstype =text / cssmedia =screen >< link rel =stylesheettype =text / csshref =./ styles / style.css/>< link rel =stylesheethref =./ bower_components / angular-ui / build / angular-ui.min.csstype =text / cssmedia =screen><！ -  Vendors  - >< script type =text / javascriptsrc =./ js /nonangular/jquery-1.11.2.min.js\"></script><script type =text / javascriptsrc =./ js / nonangular / jquery-1.11.2.min.js> ;< / script>< script src =./ bower_components / bootstrap / dist / js / boots trap.min.jstype =text / javascriptcharset =utf-8>< / script>< link rel =stylesheethref =./ bower_components / angular-ui / build / ui.min.csstype =text / cssmedia =screen><！ - 非角度库 - >< script type =text / javascriptsrc =./ js / nonangular / lodash.min.js>< / script>< script type =text / javascriptsrc =./ js / scripts.js>< / script><！ -  Angular external应用程序库 - >< script type =text / javascriptsrc =./ node_modules / angular / angular.js>< / script>< script type =text / javascriptsrc = ./node_modules/angular-route/angular-route.js\"></script><script type =text / javascriptsrc =./ node_modules / angular-sanitize / angular-sanitize.js> < / script>< script type =text / javascriptsrc =./ node_modules / angular-animate / angular-animate.js>< / script>< script src =./ bower_components / angular -ui / build / angular-ui.min.jstype =text / javascript>< / script>< script src =./ node_modu / script>< script src =./ node_modules / angular-ui/>   -bootstrap / dist / ui-bootstrap-tpls.jstype =text / javascriptcharset =utf-8>< / script>< script src =./ bower_components / angular-activity-monitor / activity-monitor.min.jstype =text / javascript>< / script><！ -  Angular components  - ><！ -  build：appcomponents js / appcomponents.js  - > < script type =text / javascriptsrc =./ js / app.js>< / script>< script type =text / javascriptsrc =./ js / config.js> ;< / script>< script type =text / javascriptsrc =./ components / directives / main.nav.directive.js>< / script><！ -  Application sections  - > ;<！ -  build：mainapp js / mainapp.js  - >< script type =text / javascriptsrc =./ js / controller.js>< / script>< script src =./ components / main / mainController.jstype =text / javascriptcharset =utf-8>< / script>  

我试过改变路径，不在文件夹引用之前加入'./'。

我的Gulpfile电子任务看起来像像这样：
$ b

  gulp.task（'electron'，function（）{ gulp.src（）.pipe（电子（{src：'./app'，packageJson：packageJson，发布：'./release'，缓存：'./cache'，版本：'v0.36.10'，包装：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包中捆绑的所有资产。

解决方案

结果发现有一些路径问题。

首先，CSS使用相对路径来引用图像。把它切换到绝对路径的诀窍。这是指令的相同问题。

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

 < base href =/> 
  

哪些东西搞乱了。删除允许CSS和JS加载正确。

I have an HTML5 web app that I'm packaging up via Electron. I'm packaging via gulp-electron.

The issue I'm having is that when the app is built and I run it, none of the CSS or JS files that are referenced in the index.html file are being loaded.

I can see that the assets were included in the build, and are part of the .app bundle in the : myapp.app/Contents/Resources/app/ folder.

Matter of fact, if I cd to that directory and run a node webserver (httpster), the app runs fine in that manner.

Here's how my CSS/JS is referenced:

<!-- 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>

I've tried changing the path to not include the './' before the folders referenced to no effect.

My Gulpfile electron task looks like this:

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(""));
});

My app folder structure looks like this:

The frustrating this is I've used this exact setup on another project and the executable works fine, and is able to reach all the assets bundled in the .app bundle just fine.

解决方案

Turns out there were a few issues with paths.

First the CSS was using relative paths to reference images. Switching this to absolute paths did the trick. This was the same issue for the directives. Switching out relative paths with absolute paths did the trick there.

Finally, the actual CSS and JS files not being loaded looks to be because in the main index.html there was this:

    <base href="/">

Which was messing with things. Removing that allowed the CSS and JS to load correctly.

这篇关于Electron应用程序未找到包中包含的CSS / JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！