当前位置：首页 > 行业动态 > 正文

hbuilder设置web服务器

admin
行业动态
2025-05-09
2

打开HBuilder，进入项目属性设置，勾选”启用Web服务器”，配置端口后保存即可

HBuilder设置Web服务器详细指南

环境准备与工具选择

HBuilder是DCloud推出的一款轻量级前端开发工具,支持快速创建、调试和预览Web项目，其内置的Web服务器功能可帮助开发者在本地实时测试项目，无需手动搭建复杂环境，以下是配置前的基础准备：

项目类型	适用场景	是否需要额外配置
纯前端项目	静态页面、Vue/React等前端框架开发	无需（HBuilder内置）
需后端接口的项目	需要模拟API或对接本地服务器	需手动配置代理
移动端项目（uni-app）	小程序、App开发	需配置云端服务或本地代理

工具版本要求：

hbuilder设置web服务器第1张

HBuilder X 2.6.0及以上版本（推荐最新版）。
无需安装Node.js，但若需NPM管理依赖仍需配置。

创建项目与基础配置

新建项目：
- 打开HBuilder,点击顶部菜单栏的 “文件” → “新建” → “项目”。
- 选择 “Web移动应用” 或 “uni-app”（根据需求），填写项目名称后完成创建。
检查默认服务器配置：
- 在项目管理器中,右键点击项目名称，选择 “运行” → “运行到浏览器”。
- HBuilder会自动启动内置服务器,默认端口为 9000，并在浏览器打开 http://127.0.0.1:9000/。

自定义Web服务器配置

HBuilder的服务器配置隐藏较深,需通过修改配置文件或使用插件实现，以下是关键步骤：

修改默认端口

路径：项目根目录下的 manifest.json 文件。
操作：在 "devServer" 字段中添加 "port": 自定义端口号（如8080）。

示例：

{  
  "devServer": {  
    "port": 8080,  
    "proxy": {}  
  }  
}

配置静态资源路径

作用：指定静态文件（CSS/JS/图片）的访问路径。
路径：同上，在 manifest.json 的 devServer 中添加 "staticDir": "unpackage/dist/static"。
注意：若资源仍无法加载，需检查开发工具中的控制台报错。

启用HTTPS（可选）

场景：需要测试HTTPS协议或加载HTTPS资源时。

操作：在 manifest.json 的 devServer 中添加：

"https": {  
  "key": "/path/to/key.pem",  
  "cert": "/path/to/cert.pem"  
}

证书生成：可通过 openssl 工具生成自签名证书。

高级功能：代理与热更新

配置API代理

用途：解决跨域问题，将前端请求代理到本地或远程服务器。

配置示例（在 manifest.json 中）：

"devServer": {  
  "proxy": {  
    "/api": {  
      "target": "http://localhost:3000", // 目标服务器地址  
      "changeOrigin": true,  
      "pathRewrite": {"^/api": "/"}  
    }  
  }  
}