在华为云开发者空间部署纯前端作品：从本地页面到作品展览馆

最近做了一个小工具：华为云成本估算卡片。输入机型、数量、使用时长和计费方式，页面会实时算出月度费用，并把计算过程展开给用户看。它没有后端、没有数据库，最终部署在开发者空间的体验版环境里，并发布到了开发者作品展览馆。这篇文章记录选型、实现和部署过程中真正踩到的几个坑。

一、为什么选纯前端

这个工具的诉求很简单：让不熟悉计费规则的人，能在一个页面里快速得到“这个配置大概多少钱”。它不需要登录，不需要保存用户数据，也不依赖实时价格接口。于是我把范围压到最小：

• 一份 HTML 入口；
• 一份 CSS，负责桌面和移动端布局；
• 一份 JavaScript，负责表单联动和计算；
• 一份 JSON，存放示例机型和单价。

这样做的好处很直接：部署时只需要一个静态文件服务，不用关心运行时、数据库和跨域；后续想搬到任何静态托管环境，改一个目录就能走。

二、把计费规则拆成可验证的公式

成本估算最容易出错的地方不是界面，而是口径。我的做法是先写清楚公式，再写代码：

月度费用 = 单价 × 数量 × 计费时长 × 折扣系数

其中：

• 包年包月按“月”计价，时长直接取月数；
• 按需计费按“小时”计价，时长取每天小时数 × 天数；
• 数量只影响总算式，不参与单价计算；
• 折扣系数单独列出，避免把折扣混进单价后无法解释。

页面上会把每一项拆开显示，例如“单价 0.35 元/小时 × 2 台 × 720 小时 = 504 元/月”。这样用户能对照自己的理解，发现口径不一致时也容易定位。

需要强调的是：页面里的价格是示例数据，只用于演示计算逻辑。真实报价必须以控制台和商务报价为准，这一点在页面上也做了标注。

三、交互上的三个小决定

第一，输入即计算，不做“提交”按钮。用户调整数量或时长时，结果区域立即更新，减少一次多余点击。

第二，结果区固定展示“计算过程”，而不是只给一个总数。对成本类工具来说，可解释性比酷炫更重要。

第三，移动端不追求把所有字段塞进一屏。表单项纵向排列，结果卡片吸底，表格允许横向滚动。小屏上最怕的是输入框和结果互相挤压，宁可多滚一点。

另外，用 localStorage 记住上一次的输入，刷新页面不用重新填。这里只存配置，不存任何个人信息。

四、部署到开发者空间体验版

开发者空间提供了开箱即用的环境，体验版适合这种短周期、低资源占用的静态作品。部署过程不复杂，但有几个细节值得注意：

1. 用相对路径引用资源。./style.css、./app.js 这种写法在本地和容器里都能用；写成 /style.css 时，一旦应用不在域名根目录就会 404。
2. 准备一个静态文件服务。纯静态页面不能直接靠打开文件运行，部署后需要一个 HTTP 服务把目录暴露出来。
3. 预览时确认端口和访问路径。容器里启动的服务端口，要和平台暴露的端口一致；否则页面能启动但打不开。
4. 刷新 404 的处理。如果只有单页，确认服务对未知路径回退到 index.html；这个作品只有首页，所以直接访问根路径即可。
5. 不要在页面里写死内网地址或本地路径。部署后这些地址都不可达，排查起来很浪费时间。

五、发布到作品展览馆

作品能访问之后，发布到展览馆还需要准备展示信息：

• 标题要说明“是什么”，而不是只写项目代号；
• 简介写清楚解决什么问题、怎么用，控制在几句话；
• 封面尽量用作品本身的截图，避免和内容无关的图；
• 标签选与作品直接相关的技术或场景；
• 发布前再走一遍完整流程：打开页面、改一个输入、确认结果变化、刷新后仍可用。

这一步看起来是“填表”，实际上是一次交付检查。很多问题只有在脱离本地环境后才会暴露，比如资源路径、字体加载、移动端布局。

六、复盘

这个作品不大，但它把一条完整的链路走通了：需求收敛、公式拆解、纯前端实现、静态部署、作品发布。几点体会：

• 先把口径写清楚，再写界面；否则界面越漂亮，错误越难发现；
• 纯前端不是“功能少”，而是把复杂度放在数据结构和交互上；
• 部署环境的差异要提前验证，尤其是路径和端口；
• 示例数据必须明确标注，避免被当成真实报价。

后续如果继续迭代，我会优先做两件事：把价格数据抽成可替换的配置文件，以及增加“方案对比”，让用户能并排看两套配置的成本差异。