Question

我在将外部文件加载到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');
})

非常感谢任何帮助！

Answer 1

试试这个

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/*匹配服务路径下的所有请求。所以我改变了你的代码以处理＆＃34; / app＆＃34;下的所有资源。夹。（例如：/app/app.js等）

path.resolve将路径从相对路径更改为绝对路径。这意味着您可以添加另一个当前工作目录。 path.resolve(__dirname, "../app")从当前工作目录"/app"添加views。它从"views/../app"解析为"/app"

（参考）Path.resolve

Answer 2

相对路径

<script src="./../app/app.js" type="text/javascript"></script>

等，指向错误的目录。

使用浏览器开发人员工具中的“网络”标签查看确切的请求。

如果整个app目录是公开的（在我看来，不应该是这种情况），＆＃34; ./../"将参考视图目录。单身。指的是当前目录，在本例中是包含index.html的目录。 Double ..指的是它上面的目录，这里是 views 。

Answer 3

而不是

userObj.email

尝试使用完整路径：

<script src="./../app/app.js" type="text/javascript"></script>

Answer 4

<link rel="stylesheet" type="text/css" href="../assets/css/stylesheet.css">

以上内容应解决您的样式表链接，其余部分请../../使用更高级别。示例：

<script src="../../app/controllers/customers/CustomerController.js">

每个../都高一级。

Answer 5

试试这个

app.use(express.static(path.join(__dirname, 'views')));

然后使用

<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css">

Answer 6

感谢SeongHyeon，我能够找到解决问题的方法。我非常感谢你们的帮助。我想详细说明这个，仅供我自己参考。

在express中声明静态路径时，您无需引用与您尝试导入的文件相关的任何内容。相反，您只需从您声明的静态路径引用该文件。

外部文件未加载到HTML中

6 个答案: