JS文件未加载到节点JS服务器中

时间:2019-02-02 13:40:21

标签: javascript html node.js

当我在本地主机中运行HTML页面时,我有一个节点js服务器,但由于我的本地js和css文件,在控制台中出现 Error Uncaught SyntaxError:Unexpected token << / strong> >无法加载。 我经历了-Node.js serve HTML, but can't load script files in served page 但这没用

我有一个文件结构 enter image description here

我的服务器代码server.js

节点js:-

var express = require('express');
var http = require('http');
var fs = require('fs');
var app = express();

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

app.get('*', function(req, res) {
    console.log("Global");
    res.sendFile(__dirname + '/public/index.html');
});

var port = process.env.PORT || 7000;

http.createServer(app).listen(7000);

我的HTML文件index.html是

<!DOCTYPE html>
<html>
<head>
    <title>sample spa app</title>
    <link rel="stylesheet" type="text/html" href="css/style.css">
</head>
<body>
    <li><a href="#home">home</a></li>
    <li><a href="#about">about</a></li>

    <div>
        <h2>you are in index.html</h2>
    </div>

   <div id="app">

   </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    <script src="public/js/app.js" type="text/javascript"></script>

</body>
</html>

2 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html>

<head>
    <title>sample spa app</title>
    <link rel="stylesheet" type="text/html" href="css/style.css">
</head>

<body>
    <li><a href="#home">home</a></li>
    <li><a href="#about">about</a></li>

    <div>
        <h2>you are in index.html</h2>
    </div>

    <div id="app">

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="./js/app.js" type="text/javascript">
    </script>

</body>

</html>

答案 1 :(得分:0)

  

<link rel="stylesheet" type="text/html" href="css/style.css">

在静态处理程序将试图找到一个文件sampleProject/public/css/style.css

  

<script src="public/js/app.js" type="text/javascript"></script>

静态处理程序将尝试找到文件sampleProject/public/public/js/app.js(是的,我写了public/public)。

这些存在的无,因此静态处理器可以让该请求传递给下一个路由。无论请求是什么,下一条路线都会强制sampleProject/public/index.html进行服务。因此,您的错误。

选项A:隔离静态提供的文件

  

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

(作为补充,您应该require('path')并声明express.static(path.join(__dirname, 'public')),这比手动连接更安全,更可移植。)

这告诉应用程序仅在路由以/public开头时使用静态处理程序。

选项B:始终尝试将文件解析为静态文件

css文件夹移至public/css,并在调用JS时将路径更改为:

  

<script src="/js/app.js" type="text/javascript"></script>

读取关于碱基here