gpt4 book ai didi

javascript - express.js(静态服务器)未加载我的 JavaScript

转载 作者:行者123 更新时间:2023-12-03 10:32:04 25 4
gpt4 key购买 nike

我使用express.js作为静态服务器,代码如下所示:

var express = require('express'),
app = express();

app
.use(express.static('./public'))
.get('*', function (req, res) {
res.sendfile('public/main.html');
})
.listen(3000);

我的文件结构:

.
├── bower_components
│   ├── angular
│   ├── bootstrap
│   └── jquery
├── node_modules
│   └── express
├── public
│   ├── main.html
│   ├── src
│   └── views
└── server.js

我的 HTML 看起来像这样:

<!DOCTYPE html>
<html ng-app="ContactsApp">
<head lang="en">
<meta charset="UTF-8">
<title> Contacts </title>
<base href="/" />
<link rel="stylesheet" href="src/bootstrap.min.css"/>

</head>
<body>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
</body>
</html>

浏览器未加载 Angular 库,我收到错误资源解释为脚本,但使用 MIME 类型 text/html 进行传输:“http://localhost:3000/bower_components/angular/angular.min .js”。

我做错了什么?我无法从之前的问题中找到任何答案。

最佳答案

这一行表示您正在从 ./public 提供静态文件

use(express.static('./public'))

所以只有这棵树会暴露给公众:

   ├── main.html
├── src
└── views

您的 bower_components 目录不是公开的,因此它不会暴露。

要解决此问题,您可以使用以下内容在应用程序的根目录中创建一个 .bowerrc 文件:

{
"directory": "public/bower_components/"
}

它将告诉 bower 将 Bower 组件安装在 public 中,而不是默认的 bower_components 目录中。创建此文件后只需运行 bower install,并且不要忘记使用更新的路径更新您的 index.html

编辑:不要试图将 use(express.static('./public')) 更改为 use(express.static('./')) 因为它可以轻松解决您的问题。它将暴露您的整个目录结构(以及所有文件),并且出于明显的安全原因而不利:)

关于javascript - express.js(静态服务器)未加载我的 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29164382/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com