用node或者vscode开启一个简单的本地server服务器,加载html网页

使用Live Server

想要加载本地html页面可以快速能让它在你本地浏览器中打开,可以有好多种方式,如果你有使用vscode,可以安装一个插件:Live Server,然后直接在vscode中直接右键就可以开启这个服务:

安装好之后,在vscode中打开html,然后右键:就可以自动打开浏览器并加载你这个html页面

使用node搭建server服务

使用node.js自己写一个server服务,然后开启服务后,就可以返回本地的一个HTML页面:

javascript 复制代码
//加载必须的模块
var http = require('http')
var fs = require('fs')
var url = require('url')
var path = require('path')

//定位静态目录的位置,根据请求找出对应的文件
function staticRoot(staticPath, req, res) {
  var pathObj = url.parse(req.url, true)

  if (pathObj.pathname === '/') {
    pathObj.pathname += 'index.html'
  }
  //读取静态目录里面的文件,然后发送出去
  var filePath = path.join(staticPath, pathObj.pathname)
  fs.readFile(filePath, 'binary', function (err, content) {
    if (err) {
      res.writeHead(404, 'Not Found')
      res.end('<h1>404 Not Found</h1>')
    } else {
      res.writeHead(200, 'Not Found')
      res.write(content, 'binary')
      res.end()
    }
  })
}
//创建服务器
var server = http.createServer(function (req, res) {
  staticRoot(path.join(__dirname, '/'), req, res)
})
//监听8080端口
server.listen(80)
相关推荐
2501_9160074710 小时前
Windows OpenSSL 生成 iOS 证书,制作 p12 与描述文件,KXBuild 签名实操
windows·vscode·ios·objective-c·个人开发·swift·敏捷流程
我要见SA姐112 小时前
Chrome 内存泄漏诊断指南:从现象定位到根因排查
ide·vscode·python·自动化·编辑器
00后程序员张12 小时前
Windows 开发 iOS App 入门,用 SwiftUI 写第一个 iOS App 装到 iPhone
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
瓶 盖12 小时前
你的 IDE 插件改了 authorized_keys:Claude Code 扩展投毒链路拆解
ide·ssh·vs code·安全分析·供应链安全·claude code
香芋芋圆1 天前
iD-editor 详解|OSM官方在线编辑器,基于D3.js的轻量地图编辑器
开发语言·javascript·编辑器
qinglongcn1 天前
Agent 可能出什么事——五类异常与应对
人工智能·编辑器·ai编程
QianhangQianping1 天前
撤销重做不是「存快照」:一个可视化编辑器的Operation 设计
java·前端·数据库·typescript·编辑器·前端架构·撤销重做
Eiceblue1 天前
用 Python 给 Word 文档加水印:文字、图片与批量处理
开发语言·vscode·python·word
2501_915921432 天前
KXBuild CI 实操,Windows/Linux 服务器接入 Jenkins 打包 iOS IPA
服务器·windows·vscode·ios·ci/cd·个人开发·敏捷流程
Lhan.zzZ2 天前
用 Qt 构建线程安全的通讯静态库:从线程亲和性到完整工程
c++·vscode·qt·tcp/ip·udp