HBuilderX 创建 Vue3 uniCloud 项目

📅 2026/7/5 3:50:29
HBuilderX 创建 Vue3 uniCloud 项目
前置必备条件安装最新版HBuilderX登录 DCloud 账号完成实名认证不实名无法创建服务空间浏览器可正常访问 uniCloud 后台控制台服务空间选用支付宝云免费资源最多免费 Redis、HTTPS、websocket、备案码第一部分HBuilderX 新建 Vue3 版 uniCloud 项目步骤 1新建 uni-app 项目顶部菜单栏文件 → 新建 → 项目项目分类选择uni-app填写项目名称、本地存放路径Vue 版本勾选Vue3视频指定 Vue3 官方推荐用法关键配置勾选启用 uniCloud服务商下拉选择「支付宝云」点击「创建」生成项目目录项目创建完成后左侧目录会自动出现uniCloud文件夹文件夹右侧标注支付宝云 - 未关联云服务空间。第二部分创建支付宝云服务空间步骤 2打开关联服务空间弹窗在左侧项目树右键点击uniCloud文件夹右键菜单选择关联云服务空间或项目 (S)3. 弹出窗口内点击右上角 新建按钮自动跳转浏览器 uniCloud 控制台创建页面地址uniCloud控制台点击新建服务空间弹出如图所示的新建弹窗步骤 3服务空间配置填写服务商选择选中「支付宝云」视频推荐对比阿里云 / 腾讯云支付宝云福利免费服务空间、备案码、websocket、免费 Redis、HTTPS 证书托管限制规则一个支付宝账号仅能创建 1 个免费服务空间已创建免费版只能选包年包月服务空间名称严格遵守 3 条命名规则视频重点标注仅允许小写英文字母、数字、短横线-必须小写字母开头不能数字 / 符号开头字符长度限制3 ~ 25 位付费方式选择免费账号未创建过免费空间可选仅限测试学习包年包月已有免费空间必须选付费视频提示包月 CDN 流量极易超标建议额外购买扩展存储套餐版本基础版入门学习首选核对全部信息点击页面底部「创建服务空间」等待 30~60 秒系统分配云资源提示创建成功第三部分HBuilderX 项目关联已创建的服务空间步骤 4回到 HBuilderX 完成绑定浏览器创建完成后切回之前的「关联云服务空间」弹窗点击右上角刷新按钮列表中会出现刚刚创建的zfb-demo服务空间勾选该行弹窗底部点击关联 (L)按钮完成项目与云空间绑定步骤 5验证关联成功左侧项目树uniCloud文件夹右侧文字变更显示空间 ID / 名称不再提示「未关联」右键uniCloud→ 打开 uniCloud Web 控制台可直接跳转当前绑定空间后台目录自动生成标准云开发目录第四部分创建后基础配套操作初始化云空间右键uniCloud→ 运行云服务空间初始化向导自动生成 uni-id 用户体系基础文件上传云资源到云端右键cloudfunctions/database→ 上传部署本地代码同步到支付宝云服务器套餐避坑提示免费空间资源有限仅用于学习测试上线项目务必升级包年包月包月套餐 CDN 流量消耗快图片 / 文件多的业务需单独购买扩展存储支付宝免费 Redis 仅提供基础容量高并发场景需付费扩容常见报错 限制服务空间名称报错检查是否大写、下划线、数字开头、长度超限无法创建免费空间账号已占用唯一免费名额只能付费关联列表看不到新建空间点击弹窗刷新或等待 1 分钟资源分配完成未实名无法创建先去 DCloud 个人中心完成实名认证多项目共用空间关联弹窗可选择「绑定其他项目的服务空间」实现多项目共用一套云资源附上传文件到服务空间的云存储复制右侧下载地址可在浏览器中查看。