Live Server扩展可一键启动本地HTTP服务器并支持热重载,适合前端快速开发;通过右键HTML文件选择“Open with Live Server”即可在http://127.0.0.1:5500预览。

在前端开发或静态页面调试时,经常需要快速启动一个本地 HTTP 服务器来预览文件。虽然可以直接打开 index.html,但某些功能(如 AJAX 请求、ES6 模块导入)要求资源必须通过 HTTP 协议加载。这时候,在 VS Code 中快速启动一个本地 HTTP/HTTPS 文件服务器就非常实用。
Live Server 是 VS Code 中最受欢迎的扩展之一,能一键启动本地开发服务器,并支持自动刷新功能。
操作步骤:Ctrl+Shift+X)index.html),选择 Open with Live Server
http://127.0.0.1:5500/index.html,服务器已运行默认端口为 5500,可在设置中修改。该服务器支持静态资源访问、热重载,适合前端开发调试。
如果你希望更灵活地控制服务器行为,可以使用 Node.js 创建一个简单的 HTTP 服务。
操作方法:server.js 文件const http = require('http');
const fs = require('fs');
const path = require('path');
const port = 8080;
const server = http.createServer((req, res) => {
let filePath = '.' + req.url;
if (filePath === './') filePath = './index.html';
const extname = String(path.extname(filePath)).toLowerCase();
const mimeTypes = {
'.html': 'text/html',
'.js': 'text/javascript',
'.css': 'text/css',
'.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpg',
'.gif': 'image/gif',
};
const contentType = mimeTypes[extname] || 'application/octet-stream';
fs.readFile(filePath, (error, content) => {
if (error) {
if (error.code === 'ENOENT') {
res.writeHead(404);
res.end('404 Not Found');
} else {
res.writeHead(500);
res.end('500 Internal Server Error');
}
} else {
res.writeHead(200, { 'Content-Type': contentType });
res.end(content, 'utf-8');
}
});
});
server.listen(port, () => {
console.log(`HTTP Server running at http://localhost:${port}/`);
});
node server.js
http://localhost:8080
若需测试 HTTPS 环境(如调用安全 API),可升级上述 Node 服务为 HTTPS。
操作步骤:openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
server.js 使用 https 模块:const https = require('https');
const fs = require('fs');
const options = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem')
};
https.createServer(options, (req, res) => {
// 同上请求处理逻辑
}).listen(8443, () => {
console.log('HTTPS Server running at https://localhost:8443/');
});https://localhost:8443,浏览器可能提示不安全,点击“继续访问”即可基本上就这些。Live Server 适合日常快速开发,Node.js 自建服务则更适合定制化需求,包括 HTTPS 支持。选择合适的方式,提升本地调试效率。
以上就是HTTP/HTTPS文件服务器:在VS Code中快速启动一个本地Server的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号