NodeJS + Express 提供的 HTML 文件未加载 js 文件?

Posted

技术标签:

【中文标题】NodeJS + Express 提供的 HTML 文件未加载 js 文件?【英文标题】:NodeJS + Express served HTML file not loading js file? 【发布时间】:2015-10-15 19:50:17 【问题描述】:

我正在运行一个 NodeJS 服务器,它使用包罗万象的路由来提供文件“index.html”。在该文件中,我链接到同一目录中的一个 javascript 文件。该 javascript 文件未正确加载。我的控制台中的错误显示为“Uncaught SyntaxError: Unexpected Token

这是我的代码

server.js

var express = require('express');
var app = express();
var config = require('./config');
var apiRouter = express.Router();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var User = require('./app/models/User');
var jwt = require('jsonwebtoken');
var path = require('path');

//Set the public folder
app.use(express.static('/public'));

//Allows us to parse POST data.
app.use(bodyParser.urlencoded( extended: true ));
app.use(bodyParser.json());

mongoose.connect(config.db);

var apiRouter = require('./app/routes/api')(app, express);

app.use('/api', apiRouter);

//MEAN apps use a catchall after any routes created by Node.

app.get('*', function(req, res) 
    res.sendFile(path.join(__dirname, 'public/app/views/index.html'));
);

app.listen(1337);

console.log('Server started at ' + Date());

public/app/views/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./test.js"></script>
<head>
<body>
    <h1>Served by node + express.</h1>
</body>
</html>

public/app/views/test.js

console.log('test.js loaded');

【问题讨论】:

不应该是app.use(express.static(__dirname + '/public'));吗? 这是问题谢谢!只是缺少 __dirname。显然我是 express 的菜鸟 :( 一周前刚开始学习。 ***.com/questions/44657829/… 这可以帮助我解决MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) 错误 【参考方案1】:

这是发生了什么:

浏览器请求/,由你的包罗万象的路由响应,所以它返回index.html

然后浏览器在./test.js 处看到一个html 脚本,因此浏览器将其解释为/test.js 并发出请求。 express.static 中间件查找不存在的 public/test.js,因此它将执行传递到与请求匹配的下一个已定义路由,这是您的包罗万象的路由。这意味着为 javascript 文件发送了 html,因此您会看到错误。

因此,要解决此问题,您需要将 ./test.js 更改为实际的相对路径 (./app/views/test.js) 或使用绝对路径 (/app/views/test.js) 以确保始终使用正确的路径,无论当前是什么路径是。

此外,您需要更改此设置:

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

到这样的事情:

app.use(express.static(__dirname + '/public'));

否则,express.static 中间件将在文件系统的根目录下查找名为 public 的目录,并且在为 javascript 文件请求提供 html 的包罗万象的路由中也会遇到同样的问题。

【讨论】:

您好,我刚刚尝试过,但没有成功。我也试过“./app/views/test.js”只是因为。也没有用。 问题是缺少 __dirname 变量,谢谢。我还应该在 express.static 中使用 path.join 吗? 我实际上也应该将其标记为答案,因为将路径更改为您所说的内容并将 __dirname 变量添加到 express.static 两者结合起来解决了问题。 :) 非常感谢您抽出宝贵时间回复和帮助。 这个答案比其他答案对我的帮助更大,因为仅仅更改 app.use 并没有奏效,它还解释了发生了什么以及为什么我们需要进行这些更改【参考方案2】:

你应该像这样设置你的静态文件夹

app.use(express.static(__dirname + '/public'));

此外,您的 html 文件将在 /public 文件夹中查找您的脚本文件。您需要为您的 index.html 文件提供脚本文件的正确路径。

<script src="/app/views/test.js"></script>

【讨论】:

以上是关于NodeJS + Express 提供的 HTML 文件未加载 js 文件?的主要内容,如果未能解决你的问题,请参考以下文章

NodeJS Express - 不使用 html 扩展显示 URL

将 AngularJS html5mode 与 nodeJS 和 Express 一起使用

nodejs Web服务(Express)

将数据从 javascript/html 页面发送到 Express NodeJS 服务器

使用 Node JS / Express 提供包含图像的静态 HTML 页面

Heroku:NodeJS Express 服务器无法提供图像