我有一个HTML5网络应用程序,我通过电子打包。
我遇到的问题是,当构建应用程序并运行它时,没有加载index.html文件中引用的CSS或JS文件。
我可以看到资产包含在构建中,并且是.app捆绑包的一部分,位于:myapp.app/Contents/Resources/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包中捆绑的所有资产。
4条答案
按热度按时间gpfsuwkq1#
结果发现路径有一些问题。
首先,CSS使用相对路径来引用图像。将相对路径切换为绝对路径就可以了。这与指令的问题相同。将相对路径切换为绝对路径就可以了。
最后,实际的CSS和JS文件没有被加载,因为在主index.html中有这样的内容:
这是混乱的东西。删除它允许CSS和JS正确加载。
kkih6yb82#
Electron通过file://协议访问文件,因此任何基本href都应以.“”开头
要使其正常工作,请在index.html(如果“/”是您的基href)中更改
进入
..路径错误就会消失。
因此,对于电子应用程序,我们总是需要使用以.“”开头的base href编译Angular 分布,当/是您的base时,编译为
bmvo0sr53#
我终于明白了什么是错误的,包括静态文件在电子
这不起作用,因为它们包含在我的index.html中,而该文件不在根文件夹中。
它在
"app/html/index.html"
中,所以我必须告诉Electron我的项目的根在哪里!只需在index.html文件的顶部添加
<base href="../../">
,包括脚本../
)或更多(../../../
),等等 *piwo6bdm4#
我发现您需要插入以“../”开头的href,例如: