直接以file:///的形式打开html文件，经常会遇到跨域的问题，所以我们通常会搭建一个简单的本地服务器来运行测试页面。

首先，构建一个静态服务器

1.使用快速模块

建立一个js文件，命名服务器，内容代码如下：

var express=require(' express ')；var app=express()；var path=require(' path ')；//指定静态资源访问目录app . use(express . static)(require(' path ')。join (_ _ dirname，' public '))；//app . use(express . static)(require(' path ')。join(__dirname，' view '))；如果有存放资源的文件夹，如果有错误，那就使用几次。//设置view变量，表示存储视图的目录，app . Set(' view '，(_ _ dirname '/public ')；//app . set(' view '，_ _ dirname)；//将模板文件的后缀名称修改为htmlapp.set('view engine '，' html ')；//运行ejs模块app.engine('。“html”，必选(‘ejs’)。_ _快递)；app.get('/')，function(req，RES){ RES . render(' index ')；});var server=app.listen(1336，' 127.0.0.1 '，function(){ var host=server . address()。地址；var port=server.address()。港口；console.log('服务器以http://% s 3360% s运行，主机，端口)})；文件结构如下：

如果它运行，只需执行：nodeserver.js。

然后在浏览器中输入http://127.0.0.1:1336/以访问项目文件夹中的文件

2.使用连接模块

建立一个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('服务器运行于http://127 . 0 . 0 . 1:1337/')；要运行它，只需执行：node server2.js，

然后在浏览器中输入http://127.0.0.1:1337/以访问项目文件夹中的文件。(如果是index.html文件，可以省略不写，默认加载此文件)；

3.使用http模块

建立一个js文件，命名为server3，内容代码如下：

var final handler=require(' final handler ')var http=require(' http ')var serveStatic=require(' Serve-static ')//Serve up public/FTP foldervar Serve=serveStatic(' public '，{'index': ['index.html '，' index . htm ']})//Create server var server=http . createserver(function on request(req，res) { serve(req，res，finalhandler(req，RES))})//listenserver(1338)。console.log('服务器运行于http://127 . 0 . 0 . 1:1338/')；要运行它，只需执行：node server3.js，

然后在浏览器中输入http://127.0.0.1:1338/以访问项目文件夹中的文件。

注意：一般文件目录如下：

源代码下载地址：https://github。com/arvin 0/nodejs-示例/树/主/web-静态-测试-服务器

第二，解决静态资源的访问问题

主要使用两个模块

1.通用服务静态模块

详细文件：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，可以找到相应的描述。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。