外部文件未加载到HTML中
[英]External files not loading into HTML
问题描述
我在将外部文件加载到index.html时遇到问题。 我的样式表以及我的JS文件根本没有显示（错误404 - 未找到）。 我的目录结构如下。
我的index.html是：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Orders and Customers</title>
<link rel="stylesheet" type="text/css" href="./assets/css/stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.min.js"></script>
<script src="./../app/app.js" type="text/javascript"></script>
<script src="./../app/controllers/customer/CustomerController.js"></script>
<script src="./../app/controllers/order/OrderController.js"></script>
<script src="./../app/services/customer/CustomerService.js"></script>
<script src="./../app/services/order/OrderService.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
这是Chrome显示的内容：
我的server.js是：
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
require('./server/config/mongoose.js');
require('./server/config/routes.js')(app);
app.use(express.static(path.join(__dirname, './views')));
app.listen(8000, function() {
console.log('Listening on Port 8000');
})
任何帮助是极大的赞赏！
6 个解决方案
解决方案1
3 已采纳 2016-01-07 08:30:36
尝试这个
在server.js中
var router = express.Router();
router.use(express.static(path.resolve(__dirname, "../app")));
在index.html中
<script src="/app.js" type="text/javascript"></script>
<script src="/controllers/customer/CustomerController.js"></script>
<script src="/controllers/order/OrderController.js"></script>
<script src="/services/customer/CustomerService.js"></script>
<script src="/services/order/OrderService.js"></script>
Router是捕获*路径的中间件。 例如， /service/*匹配服务路径下的所有请求。 所以我更改了代码以处理“/ app”文件夹下的所有资源。 （例如： /app/app.js等）
path.resolve将路径从相对路径更改为绝对路径。 这意味着您可以添加另一个当前工作目录。 path.resolve(__dirname, "../app") "/app"从当前工作目录（ views ）添加"/app" 。 它从"views/../app"解析为"/app"
（参考） Path.resolve
解决方案2
0 2016-01-07 05:26:12
相对路径
<script src="./../app/app.js" type="text/javascript"></script>
等，指向错误的目录。
使用浏览器开发人员工具中的“网络”选项卡，查看确切的请求。
如果整个app目录是公共的（在我看来，不应该是这种情况），“。/。/”将引用views目录。 单身。 指的是当前目录，在本例中是包含index.html的目录。 Double ..指的是它上面的目录，这里是视图 。
解决方案3
0 2016-01-07 05:30:21
而不是
<script src="./../app/app.js" type="text/javascript"></script>
尝试使用完整路径：
<script src="/app/app.js" type="text/javascript"></script>
<script src="/app/controllers/order/OrderController.js"></script>
解决方案4
0 2016-01-07 05:43:21
<link rel="stylesheet" type="text/css" href="../assets/css/stylesheet.css">
以上应解决您的样式表链接，其余使用../../去更高级别。 例：
<script src="../../app/controllers/customers/CustomerController.js">
每个../都高一级。
解决方案5
0 2016-01-07 05:48:48
尝试这个
app.use(express.static(path.join(__dirname, 'views')));
并且只是使用
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css">
解决方案6
0 2016-01-07 12:16:16
感谢SeongHyeon，我能够找到问题的解决方案。 我非常感谢你们的帮助。 我想详细说明这个，仅供我自己参考。
在express中声明静态路径时，您不需要引用与您尝试从中导入的文件相关的任何内容。 相反，您只需从您声明的静态路径引用该文件。
将外部文本加载到HTML
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.