nodejs 構建本地web測試伺服器 以及 解決訪問靜態資源的問題！有完整源碼！

直接打開html文件，是以file:///方式打開的，這種方式很多時候會遇到跨域的問題，因此我們一般會搭建一個簡易的本地伺服器，來運行測試頁面。

一、構建靜態伺服器

1、使用express模塊

建立個js文件，命名server，內容代碼如下：

1 var express = require("express");
2 var app = express;
3 var path = require("path");
4
5 //指定靜態資源訪問目錄
6 app.use(express.static(require("path").join(__dirname, "public")));
7 // app.use(express.static(require("path").join(__dirname, "views"))); 如果有文件夾存放資源，出現報錯的話，那就多use幾次就可以了
8 // 設定views變數，意為視圖存放的目錄
9 app.set("views", (__dirname + "/public"));
10 // app.set("views", __dirname);
11 // 修改模板文件的後綴名為html
12 app.set( "view engine", "html" );
13 // 運行ejs模塊
14 app.engine( ".html", require( "ejs" ).__express );
15
16 app.get("/", function(req, res) {
17 res.render("index");
18 });
19
20 var server = app.listen(1336, "127.0.0.1",function{
21 var host = server.address.address;
22 var port = server.address.port;
23 console.log("Server running at http://%s:%s", host, port)
24 });

文件結構如下：

運行的話只要執行：node server.js就可以了

然後在瀏覽器輸入 http://127.0.0.1:1336/ 來訪問項目文件夾內的文件了

2、使用connect模塊

建立個js文件，命名 server2 ，內容代碼如下：

var connect = require("connect");
var serveStatic = require("serve-static");

var app = connect;
// app.use(serveStatic("C:\xxx\xxx\xxx\項目文件夾"));
app.use(serveStatic("public"));

app.listen(1337);
console.log("Server running at http://127.0.0.1:1337/");

運行的話只要執行：node server2.js就可以了，

然後在瀏覽器輸入 http://127.0.0.1:1337/ 來訪問項目文件夾內的文件了。（如果是index.html文件可以省略不寫，默認載入的就是這個文件）；

3、使用http模塊

建立個js文件，命名 server3 ，內容代碼如下：

1 var finalhandler = require("finalhandler")
2 var http = require("http")
3 var serveStatic = require("serve-static")
4
5 // Serve up public/ftp folder
6 var serve = serveStatic("public", {"index": ["index.html", "index.htm"]})
7
8 // Create server
9 var server = http.createServer(function onRequest (req, res) {
10 serve(req, res, finalhandler(req, res))
11 })
12
13 // Listen
14 server.listen(1338);
15 console.log("Server running at http://127.0.0.1:1338/");

運行的話只要執行：node server3.js就可以了，

然後在瀏覽器輸入 http://127.0.0.1:1338/ 來訪問項目文件夾內的文件了。

註：總的文件目錄如下：

二、解決訪問靜態資源

主要使用兩個模塊

1.通用的 serve-static 模塊

2.express專屬的 app.use(express.static(require("path").join(__dirname, "public"))); 方法

詳細文檔：http://expressjs.com/en/4x/api.html，然後ctrl+F搜索 express.static ，就能找到對應的說明了。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！