不能在ExpressJS服务的索引文件中包含JS文件

目前我正在构build一个Web应用程序,其中包含多个页面。 但是,每个页面都有多个视图。 最初的devise是将每个页面设置为一个SPA,并且只是从Node.js后端服务index.html ,让React.js处理所有的视图路由。

事实certificate,这比我想象的要复杂得多。 这是问题。

Node.js路由(片段):

 router.get("/", function(request, response){ response.sendFile("/index.html", { root: __dirname + "/../client/pages/home/" }); }); 

但是在index.html (snippet)中:

 <html> <head> <title>New Website</title> </head> <body> <h1>Welcome to my website..</h1> <div id="App"> </div> <script src="index.js"></script> </body> </html> 

index.js不包含在内。 当浏览器尝试包含index.js它会从Node.js服务器请求路由www.example.com/index.js ,这显然没有设置,所以我得到一个Cannot GET /index.js响应。

每个SPA都在其index.htmlindex.js文件夹中。 使用所有js文件创build公用文件夹目前不是一个选项。

================================================== ========================

解决:这是我使用的代码

clientController.js

 module.exports = function(app){ router.get("/", function(request, response){ app.use("/", express.static(__dirname + "/../client/pages/page1/")); response.sendFile("index.html", { root: __dirname + "/../client/pages/page1/" }); }); router.get("/page2/*", function(request, response){ app.use("/", express.static(__dirname + "/../client/pages/page2/")); response.sendFile("index.html", { root: __dirname + "/../client/pages/page2/" }); }); return router; }; 

server.js

 var routes = require("controllers/clientController.js"); app.use("/", routes); 

接受的答案,我不得不添加sendFile()行,以防止请求挂起。 这解决了响应,并允许在HTML文件中包含文件的正确path。

您的目录将被视为静态。 您不需要制作单独的目录或定义单独的路线。

 router.use(express.static( __dirname + "/../client/pages/home/")); 

如ExpressJs文档中所述 ,您必须使用express.static(root, [options])来创buildpipe理您网站的中间件。 这是Express中唯一的内置中间件function。

快递应用示例:

在所有你必须启动你的expression应用程序之前:

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

然后你开始添加你的中间件:

注意:您可以添加多个中间件,并按顺序链接它们。 换句话说,您可以在网站中间件之前添加标头处理程序。

标头中间件处理程序示例:

 app.use(function (req, res, next) { /* you can also handle https redirection */ // if (req.protocol != "https") { // res.writeHead(301, {"Location": "https://" + req.headers['host'] + req.url}); // res.end(); // return; // } // here you can config you response headers res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); next(); // this will pass the request to the next middleware }); 

网站路由器例子:

要使用ExpressJ创build中间件网站,您必须使用express.static和您的相关网站文件夹,并将您的默认页面命名为index.html

 app.use("/", express.static('PATH_TO_WEBSITE FOLDER')); 

完整的ExpressJs应用程序示例:

 var express = require('express'); var app = express(); app.use(function (req, res, next) { /* you can also handle https redirection */ // if (req.protocol != "https") { // res.writeHead(301, {"Location": "https://" + req.headers['host'] + req.url}); // res.end(); // return; // } // here you can config you response headers res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); next(); // this will pass the request to the next middleware }); app.use("/", express.static('PATH_TO_WEBSITE FOLDER')); var httpServer = http.createServer(app); httpServer.listen(80, "HERE_PUT_YOUR_DOMAIN", function () { console.log('HTTP: express-example running on port ' + 80 + '.'); });