2015-07-25 12 views
6

Używam serwera NodeJS, który używa trasy catchall do wyświetlenia pliku "index.html". W tym pliku łączę się z plikiem javascript w tym samym katalogu. Ten plik javascript nie jest poprawnie ładowany. Błąd w mojej konsoli brzmi "Uncaught SyntaxError: Nieoczekiwany token <", który po badaniu wydaje się oznaczać, że ścieżka do mojego pliku JS jest niepoprawna. Jednak plik js znajduje się w tym samym katalogu co "index.html", a ja odwołuję się do niego tak, więc co powinno być poprawne?NodeJS + Express wyświetlany plik HTML nie ładujący pliku js?

Oto mój kod

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

publiczne/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> 

publiczny/app/views/test .js

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

Nie powinno to być "app.use (express.static (__ dirname + '/ public'));'? –

+0

To był problem dziękuję! Tylko brakujący __dirname. Oczywiście jestem noobem z ekspresowym :(Właśnie zacząłem się uczyć go tydzień temu. –

Odpowiedz

6

należy ustawić folder statyczne jak to

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

Również plik html będzie wyglądać wewnątrz samego katalogu/folderu publicznego do pliku skryptu. Musisz nadać plikowi index.html właściwą ścieżkę do pliku skryptu.

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

Tak, dziękuję, to był problem –

+1

Nie ma za co! –

4

Oto co się dzieje:

  • Przeglądarka żąda /, która odpowiedziała na trasie przez catchall, więc wraca index.html.

  • Przeglądarka następnie widzi skrypt w html pod adresem ./test.js, więc przeglądarka interpretuje to jako /test.js i wysyła żądanie. Oprogramowanie pośredniczące express.static wyszukuje public/test.js, które nie istnieje, więc przekazuje wykonanie do następnej zdefiniowanej trasy, która odpowiada żądaniu, które jest twoją trasą catchall. Oznacza to, że html jest wysyłany do pliku javascript, stąd pojawia się błąd.

Tak, aby rozwiązać ten problem, należy zmienić ./test.js do rzeczywistej ścieżki względnej (./app/views/test.js) lub użyć ścieżki bezwzględnej (/app/views/test.js), aby upewnić się, że poprawna ścieżka jest zawsze, bez względu na to jaka jest obecna ścieżka .

Dodatkowo, trzeba będzie to zmienić:

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

do czegoś takiego:

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

Inaczej express.static middleware będzie szukać katalogu o nazwie public od korzenia systemu plików i będziesz mieć ten sam problem z trasą catchall obsługującą html dla żądania pliku javascript.

+0

Cześć, właśnie to wypróbowałem i to nie zadziałało. /app/views/test.js "tylko dlatego, że." Również nie zadziałał. " –

+0

Problem polegał na tym, że brakująca zmienna __dirname dziękuje. Czy powinienem także używać path.join wewnątrz express.static? –

+1

Możesz, jeśli chcesz. – mscdex

Powiązane problemy