电子应用程序未找到包含在软件包中的CSS/JS

我有一个HTML5 Web应用程序，我通过Electron进行了打包。我是通过大口电子包装的。电子应用程序未找到包含在软件包中的CSS/JS

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

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

事实上，如果我cd到该目录并运行节点web服务器（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捆绑中的所有资产就好了。

来源

2016-03-08 TWLATL

原来有一些路径问题。

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

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

<base href="/">

这与事情搞乱。删除允许CSS和JS正确加载。

来源

2016-03-09 19:01:20 TWLATL

电子应用程序未找到包含在软件包中的CSS/JS

回答

相关问题