的简单设置使用live-serverNode.js项目开发调试前端项目开发调试时，通常需要提供一个Web服务器来实现部分页面的功能调试。因为如果通过file://协议访问html或者js，与http://协议相比，安全性有很大的不同，而且file://访问文件时不能传递http协议头，所以构建一个Web服务器成为强制选项。很多IDE自动提供了这样的功能，比如HBuilder。自己搭建静态web服务器也很容易，而live-server这个node.js开发的软件非常好用。live-server的安装和使用非常简单：安装：npminstall-glive-server使用：live-server--port=9090可以指定绑定的ip和端口号，也可以指定证书来配置支持https协议。live-server可以自动监听文件变化，自行重新加载页面，非常方便前端开发。搭建一个静态的web服务器，但是在某些情况下，需要做一些自定义的设置，比如前后端分离的项目。当需要访问后端接口时，需要进行跨域配置。如果使用代理方式，则可以更灵活地使用它。无需修改后端代码（因为正式发布后往往不需要这些修改，因为生产环境可能由网关完成跨域配置，或者同域不需要跨域）-域配置）。这时候通过一个简单的js文件就可以很方便的完成一个代理web服务器。搭建一个可以访问静态文件的web服务器一般只需要下面的代码："usestrict";constfs=require('fs');constpath=require('path');consthttp=require('http');consturl=require('url');constPORT=3000;constargs=process.argvletstaticBasePath='../dist';if(args.length>2)staticBasePath=args[2];conststaticServe=function(req,res){constresolvedBase=path.resolve(staticBasePath);constsafeSuffix=path.normalize(req.url).replace(/^(\.\.[\/\\])+/,'');constfileLoc=path.join(resolvedBase,safeSuffix);letpathname=url.parse(req.url).pathname;//根据url获取文件路径，读取文件返回给客户端fs.readFile(fileLoc,function(err,data){if(err){res.writeHead(404,'NotFound');res.write('404:找不到文件！');returnres.end();}res.statusCode=200;res.write(data);returnres.end();});};consthttpServer=http.createServer(staticServe);httpServer.listen(PORT);fs,http,path和url是node.js自带的模块。上面的简单案例，不需要安装额外的模块就可以实现js、html、css、图片等静态文件的访问构建支持后端接口的代理服务器。当需要同时访问静态文件和后端接口时，可以添加对http-proxy的支持。您只需要在上面的代码中添加少量代码如下：“usestrict”；constfs=require('fs');constpath=require('path');consthttp=require('http');consturl=require('url');constPORT=3000;//npminstallhttp-proxy--save-dev//用于代理一些请求到javaconsthttpProxy=require('http-proxy');constproxy=httpProxy.createProxyServer({//后端服务target的接口地址:'http://localhost:8080/',});proxy.on('error',function(err,req,res){res.writeHead(500,{'content-type':'text/plain'});控制台。log(err);res.end('出了点问题。我们正在报告自定义错误消息。');});constargs=process.argvletstaticBasePath='../dist';if(args.length>2)staticBasePath=args[2];conststaticServe=function(req,res){constresolvedBase=path.resolve(staticBasePath);constsafeSuffix=path.normalize(req.url).replace(/^(\.\.[\/\\])+/,'');constfileLoc=path.join(resolvedBase,safeSuffix);让pathname=url.parse(req.url).pathname;//判断是否是接口访问，会通过proxy转发//这里假设前端访问后端接口是通过/gaming/xxx实现路由区分if(pathname.indexOf("游戏")>0){proxy.web(req,res);返回;}fs.readFile(fileLoc,function(err,data){if(err){res.writeHead(404,'NotFound');res.write('404:FileNotFound!');returnres.end();}res.statusCode=200;res.write(data);returnres.end();});};consthttpServer=http.createServer(staticServe);httpServer.listen(PORT);Mime类型使用示例如果需要支持特殊文件，比如WebAssembly，扩展名为.wasm，需要对返回的Content-Type做一些处理，即：varmime=require('mime')fs.readFile(fileLoc,function(err,data){if(err){res.writeHead(404,'NotFound');res.write('404:FileNotFound!');returnres.end();}letextension=path.extname(fileLoc);lettype=mime.getType(fileLoc);if(type){res.setHeader('内容类型',类型);}elseif(extension=='.wasm'){res.setHeader('content-type',"application/wasm");}res.statusCode=200;res.write（数据）；返回res.end();});这是因为在前端加载WebAssembly时，浏览器必须根据application/wasm返回content-type。参考链接：https://stackabuse.com/node-h...
