NodeJS + Express提供的HTML文件無法加載js文件？

Question

我正在運行NodeJS服務器，該服務器使用綜合路由來提供文件'index.html'。 在該文件中，我鏈接到同一目錄中的javascript文件。 該javascript文件未正確加載。 我的控制台中的錯誤為“未捕獲的SyntaxError：意外的令牌<”，這在研究后似乎意味着我的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());

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>

公共/應用程序/視圖/ 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並/test.js進行請求。 express.static中間件查找不存在的public/test.js ，因此它將執行傳遞到與請求匹配的下一個定義的路由，這就是您的全部路由。 這意味着為javascript文件發送了html，因此出現了錯誤。

因此，要解決此問題，您需要將./test.js更改為實際的相對路徑（ ./app/views/test.js ）或使用絕對路徑（ /app/views/test.js ）以確保正確無論當前路徑是什么，始終使用path。

此外，您將需要更改以下內容：

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

像這樣：

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

否則， express.static中間件將在文件系統的根目錄下查找名為public的目錄，並且在為您的javascript文件請求提供html的catchall路由中，您將遇到同樣的問題。

NodeJS + Express提供的HTML文件無法加載js文件？

問題描述

2 個解決方案

解決方案1
15 已采納 2015-07-25 03:00:30

解決方案2
6 2015-07-25 03:01:48

NodeJS + Express提供的HTML文件無法加載js文件？

問題描述

2 個解決方案

解決方案1 15 已采納 2015-07-25 03:00:30

解決方案2 6 2015-07-25 03:01:48

解決方案1
15 已采納 2015-07-25 03:00:30

解決方案2
6 2015-07-25 03:01:48