Question

我正在运行一个NodeJS服务器，它使用一个catchall路由来提供文件'index.html'。在该文件中，我链接到同一目录中的javascript文件。该javascript文件未正确加载。我的控制台中的错误显示为“Uncaught SyntaxError：Unexpected Token＆lt;”，在研究之后似乎意味着我的JS文件的路径不正确。但是，js文件与'index.html'位于同一目录中，我正在引用它，这应该是正确的？

这是我的代码

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());

公开/应用/视图/ 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>

公开/应用/视图/ test.js

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

Answer 1

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

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

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

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

Answer 2

这里发生了什么：

浏览器请求/，它会被您的捕获路由响应，因此它会返回index.html。
然后浏览器在./test.js的html中看到一个脚本，然后浏览器将其解释为/test.js并发出请求。 express.static中间件查找public/test.js，它不存在，因此它将执行传递给与请求匹配的下一个定义的路由，这是您的catchall路由。这意味着将为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的catchall路由会遇到同样的问题。

NodeJS + Express服务的HTML文件没有加载js文件？

2 个答案: