Vue多语言随机数演示系统部署实录：H5封装与后台配置

声明：本文仅供技术学习参考，不构成任何投资建议或运营指导；任何实际部署必须遵守当地法律法规，禁止用于任何违法违规用途。

最近帮一个做互动演示项目的客户装了一套多语言随机数演示系统，前端是Vue，体验接近原生H5，后端单独走API。整体不算难，但坑集中在语言包、回调验签、打包白屏和概率参数边界。下面按我实际部署顺序写，能少踩几个坑。

功能实测：别只看演示页，要盯后台开关

前台体验

首页加载做了分包，首屏大概1.8秒，弱网掉到3秒左右。路由切换很顺，Vue组件复用做得还可以。多语言切换不是刷新整页，而是热替换文案，阿拉伯语方向要单独测，按钮容易溢出。随机结果展示用动画延迟，前端只负责呈现，真正结果必须从接口返回，不然二开后会乱。

后台控制

后台能配语言包、活动开关、演示概率区间、单次上限、冷却时间和黑名单。重点看日志：每次随机请求要有request_id、时间戳、参数快照、返回结果。没有这四项，后面排查全靠猜。支付这块我只接沙盒网关，订单状态分created、paid、timeout、closed，回调必须验签并重放拦截。

亮点：前后端分离加统一返回码，二开时只改service层，页面不用大动；但演示概率、次数上限、风控开关一定要放进后台，不要写死在前端。

部署要点：Nginx、接口和缓存别混着来

环境组合

我用的是Ubuntu 22.04，Nginx做反代，前端dist放独立站点，API走/api前缀。数据库MySQL 8.0，Redis做会话、限流和随机请求幂等。建议上Docker Compose，三容器起步：web、api、redis；MySQL看团队习惯，熟手可宿主机。.env别进仓库，JWT密钥、网关密钥、回调白名单分环境管理。

常见报错

历史模式路由刷新404，是try_files没指到index.html。跨域不要图省事全开，按域名白名单放行。H5封装后接口如果走https，页面也不能混http，否则直接拦。打包成安卓苹果壳时，把启动图、沉浸式状态栏、返回键退出确认先调好，不然后面应用市场审核很烦。

二开与合规边界

二开入口先看三个目录：locales、api/service、admin/config。新增语种只加json不够，日期、数字千分位、昵称敏感词过滤也要同步。主题色用CSS变量抽出来，客户换皮十分钟搞定。所有随机结果都按演示数据处理，页面加清晰标识；涉及数字资产或余额变动的，只接测试通道，写清沙盒状态。上线前把演示水印、默认账号、调试接口关掉，遵守法律法规，禁止任何违法违规用途。