直接打开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/ 来访问项目文件夹内的文件了。
注：总的文件目录如下：
源码下载地址：https://github.com/arvin0/nodejs-example/tree/master/web-static-server-example
二、解决访问静态资源
主要使用两个模块
1.通用的 serve-static 模块
详细文档：https://github.com/expressjs/serve-static
2.express专属的 app.use(express.static(require('path').join(__dirname, 'public'))); 方法
详细文档：http://expressjs.com/en/4x/api.html ，然后ctrl+F搜索 express.static ，就能找到对应的说明了。
