电子应用程序没有find包中的CSS / JS

我有一个HTML5的networking应用程序，我通过电子打包。 我正在通过大口电子包装。

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

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

事实上，如果我cd到该目录并运行一个节点的web服务器（HTTTER），应用程序以这种方式运行良好。

以下是我的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> 

我已经尝试改变path不包括'./'之前的文件夹引用没有效果。

我的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

原来有几个path问题。

首先，CSS使用相对path来引用图像。 切换到绝对path做了诀窍。 这是指令相同的问题。 用绝对path切出相对path在那里诀窍。

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

  <base href="/"> 

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