电子应用程序没有找到包含在内的CSS/JS

Question

我有一个HTML5网络应用程序,我通过Electron打包.我是通过gulp-electron包装的.

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

我可以看到资产包含在构建中,并且是:myapp.app/Contents/Resources/app/文件夹中.app包的一部分.

事实上,如果我cd到该目录并运行节点webserver(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文件夹结构如下所示:

令人沮丧的是,我已经在另一个项目中使用了这个确切的设置,并且可执行文件工作正常,并且能够很好地到达.app包中捆绑的所有资产.

Answer 1

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

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

<base href="/"> 

进入

<base href="./">

..并且路径错误将消失。

因此，对于电子应用程序，我们总是需要使用以 '.' 开头的 base href 编译角度 dist，当 / 是您的 base 时，编译为

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

Answer 2

事实证明,路径存在一些问题.

首先,CSS使用相对路径来引用图像.将其切换为绝对路径就可以了.这是指令的相同问题.用绝对路径切换相对路径就可以了.

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

    <base href="/">

哪个搞乱了.删除它允许CSS和JS正确加载.