一、准备工作
1. 安装 Node.js 和 npm
需要从 [Node.js官网](https://nodejs.org/) 下载并安装最新版本的 Node.js，安装完成后，打开命令行工具（Windows 的命令提示符或 macOS 的终端），输入以下命令检查是否安装成功：
node -v npm -v
如果显示版本号，则说明安装成功。
2. 全局安装 http-server 模块
http-server 是一个简单零配置的命令行 HTTP 服务器，非常适合快速搭建本地开发环境，在命令行中运行以下命令进行全局安装：
npm install -g http-server
二、创建项目文件
1. 创建 HTML 文件
在项目目录中创建一个名为index.html 的文件，并添加以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Server Example</title>
</head>
<body>
<h1>Hello, this is a local server!</h1>
<script src="script.js"></script>
</body>
</html> 2. 创建 JavaScript 文件
在同一目录下创建一个名为script.js 的 JavaScript 文件，并添加以下内容：
document.addEventListener('DOMContentLoaded', () => {
fetch('data.json')
.then(response => response.json())
.then(data => {
document.querySelector('h1').textContent = data.message;
})
.catch(error => console.error('Error:', error));
}); 3. 创建 JSON 数据文件
在同一目录下创建一个名为data.json 的 JSON 文件，并添加以下内容：
{
"message": "Data loaded from local server!"
} 三、启动本地服务器
1. 进入项目目录
在命令行中使用cd 命令进入包含上述文件的项目目录。
cd path/to/your/project
2. 启动服务器
在项目目录中运行以下命令启动本地服务器：
http-server
默认情况下，服务器会在8080 端口启动，并在浏览器中自动打开http://localhost:8080，如果希望指定其他端口，可以使用-p 参数：
http-server -p 8081
四、访问与测试
1. 查看效果
在浏览器中访问http://localhost:8080 或http://localhost:8081，你应该能够看到页面上显示“Data loaded from local server!”，如果一切正常，控制台将显示类似如下的信息：
Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.1.4:8080 Hit CTRL-C to stop the server
2. 修改内容并刷新
尝试修改data.json 文件中的内容，然后刷新浏览器，观察页面内容是否实时更新，这验证了本地服务器是否正确加载了静态资源。
五、常见问题与解决方案
Q1: 无法启动服务器怎么办？
A1: 确保你已经正确安装了 Node.js 和 npm，http-server 模块已全局安装，可以尝试重新安装 http-server：
npm install -g http-server
如果仍然无法启动，请检查是否有防火墙或杀毒软件阻止了服务器的运行。
Q2: 如何更改服务器端口？
A2: 使用-p 参数可以指定服务器端口，要在8081 端口启动服务器，可以使用以下命令：
http-server -p 8081
以上内容就是解答有关“npm 搭建本地服务器”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1322284.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复