Unity 发布到网页端-全流程操作（保姆级详解）| 图文详解，快速上手。Unity WebGL 发布到 CloudBase 静态托管

一.unity导出 WebGL

1.1先做准备：安装 WebGL 模块

1. 打开 Unity Hub（不是 Unity 编辑器，是 Unity Hub）。
2. 左侧点 Installs（安装） → 找到你当前用的 Unity 版本 → 点右边 齿轮/三个点 → Add Modules（添加模块）。
3. 在列表里勾选 WebGL Build Support（网页版构建支持），点安装。
4. 等它下载安装完成（可能需要一段时间，几百 MB）。

   

1.2切换平台到 WebGL

1. 打开你的项目，顶部菜单 File → Build Settings（构建设置）。
2. 在 Platform（平台） 列表里选 WebGL。
3. 点 Switch Platform（切换平台）。
4. 等它把资源转换完（进度条走完，可能需要几分钟）。

1.3配置 WebGL 设置（关键，避免导出后一堆问题）

在 Build Settings 窗口 → 点左下角 Player Settings（播放器设置），在右侧 Inspector 里设置：

1. 分辨率/画布

• Resolution and Presentation：
  • Default Canvas Width：1920
  • Default Canvas Height：1080
  • （设置为其他也可以 具体看自己本身设置）

2. 颜色空间（如果之前用的是 Linear）

• Other Settings → Color Space：可以保持 Gamma（WebGL 支持 Linear，但 Gamma 更稳）。如果你的模型在编辑器里看着正常，一般不用改。

3. 压缩格式

• Publishing Settings → Compression Format：
  • 如果本地测试/自己看 → 选 Disabled（最不容易出错，文件大但本地能直接打开）
  • 如果要放到服务器 → 选 Gzip 或 Brotli（体积小，但需要服务器支持）

4.其他常见设置

• Other Settings → Strip Engine Code：保持默认（勾选）。
• Managed Stripping Level：如果导出后报错/功能异常，可以调到 Minimal。

1.4导出（Build）

1. 回到 Build Settings 窗口。
2. 点 Build 按钮。
3. 选一个空文件夹作为输出目录（比如 D:\MyBuild），新建一个文件夹给它。
4. 点确定，等构建完成（可能几分钟到十几分钟，第一次慢）。

构建完成后，那个文件夹里会有：

index.html

Build/ （核心文件）

TemplateData/ （页面模板）

1.5本地测试（关键：不能直接双击 index.html）

⚠️ WebGL 不能直接双击 index.html 打开（会因"本地文件跨域"报错，画面打不开）。必须用本地服务器方式打开。

最简单的本地测试方法：

• （推荐，用 Unity 自带）：构建完后，Unity 会弹出一个小窗口，点 Launch / Open 按钮，它会自动起一个本地服务器并打开浏览器。这是最省事的。
•    如果Unity 没有弹出弹出一个小窗口，

用 Unity 的 Build And Run       File → Build Settings。
点 Build And Run（不是 Build）。
选一个空文件夹。
Unity 会自动：构建 → 起本地服务器 → 自动打开浏览器。

二：以 CloudBase 为例，上传

2.1 控制台准备

1. 腾讯云控制台搜索 云开发 CloudBase → 新建环境（选按量计费，有免费额度；地域随便）
2. 进入环境 → 左侧找 静态网站托管（有的版本叫 Web 托管）→ 开通
3. 开通后会给你一个默认域名，形如 xxx.tcloudbaseapp.com —— 这就是你要发给别人的网址

2.2 上传（二选一）

方式一：网页上传（简单，但 109MB 容易超时） 静态网站托管 → 上传文件 → 传 web.zip → 若能在线解压就解压；不能解压就只能一个个传，很痛苦。

方式二：CLI 上传（109MB 强烈推荐这个） ✅

先装 Node.js，官网下载 LTS 版，一路下一步，下载教程请看：Node.js 与 npm 的安装与配置（详细教程）_npm安装-CSDN博客https://blog.csdn.net/xhmico/article/details/159132633然后命令行：

# 安装腾讯云 CloudBase 命令行工具

npm install -g @cloudbase/cli

# 登录（会弹浏览器授权）

tcb login

# 进入你的构建文件夹

cd 你的构建文件夹路径

# 部署到环境根目录（把 ENV_ID 换成你的环境ID）

tcb hosting deploy ./ / -e ENV_ID

命令行会显示上传进度。大概几分钟。这条命令可以重复执行，改了内容再跑一次就更新了。（下面是这段命令的详细教程。）

如果报错说没开通托管，回控制台把静态网站托管开通一下再跑。

2.3 命令行详细教程

先把这3样东西拿到手
CloudBase中，环境 ID 左侧  环境管理→点 ceshi →复制 ceshi-xxxxxxxx
默认域名静态网站托管一基础配置（或概览页底部）shi-xxx.tcloudbaseapp.com

打开命令行 
方法：直接在构建文件夹里打开CMD(最推荐 新手必用)
1.用文件资源管理器打开你的构建文件夹(进到能看到 index.html 那一层)
2.点一下顶部的地址栏 （显示路径的那一条），把里面的路径全部删掉
3.输入cmd，按回车

在黑色窗口里输入（每行按回车执行）：node -v

正常会显示类似 v20.11.0。✅ 说明 Node 装好了。

输入npm -v

显示类似 10.2.4。✅

输入dir

应该能看到 index.html、Build、TemplateData。

2.4 安装 CloudBase 命令行工具

cmd中输入

npm install -g @cloudbase/cli

回车      会滚一堆文字，等它跑完（1–3 分钟）。看到类似 added xxx packages 就是成功。

如果卡住不动，多半是网络问题，试：

CMD输入
npm install -g @cloudbase/cli --registry=https://registry.npmmirror.com（用了国内镜像，会快很多）

2.5 登录

CMD输入

tcb login

会自动弹出浏览器，用你的腾讯云账号登录并点授权/同意。

回到黑色窗口应该显示登录成功，并且会列出你的环境

顺便拿到环境 ID

登录后直接运行：

CMD输入

tcb env:list

会列出所有环境，找到 ceshi 那一行，复制它后面的环境 ID，形如 ceshi-1a2b3c4d5e。这个就是下面要用的 你的环境ID。

2.6 上传（最关键的一步）

还是在构建文件夹里那个黑窗口，执行：

CMD输入

tcb hosting deploy ./ -e 你的环境ID

把 你的环境ID 换成第 6 步复制的那串，比如：

tcb hosting deploy ./ -e ceshi-1a2b3c4d5e

⚠️ 注意几点：

• ./ 表示"把当前文件夹里的内容全部上传"，保持原样别改
• 竖线左边 ./ 和 -e、环境 ID 之间都要有空格
• 后面不要加 \ 或引号

然后会显示上传进度条。大概几分钟，让它慢慢跑，别关窗口。

如果它问你要不要确认

有的版本会问 是否继续？(Y/n) → 输入 Y 回车。

2.7 验证 🎉

1. 回控制台 → 静态网站托管 → 文件管理 确认根目录下直接能看到 index.html、Build/、TemplateData/
2. 打开 静态网站托管 → 基础配置（或概览页），复制默认域名（形如 ceshi-xxx.tcloudbaseapp.com）
3. 浏览器打开 https://默认域名

出现 Unity 加载条 → 进画面 = 成功！把这个网址分享给别人。