Vue金融业务演示系统搭建实录：多语言前端与后台审批部署笔记

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

上周帮一位做跨境业务的朋友把这套基于 Vue 的金融业务演示系统跑起来了。需求很实际：前台要让越南地区用户看得懂，中越双语能切；后台要给运营同事做流程管理和状态标记；代理端单独一套入口，权限别串。整套前后端都是 Vue 写的，黄色主题 UI 挺醒目，不是那种满屏渐变色的模板感。从拿到包到线上跑通大概花了一天半，中间踩了几个小坑，记下来给后面要部署的朋友省点时间。

一、功能实测：前台、后台、代理端三块怎么配合

先说清楚结构。这套东西分三个界面：用户端（移动端适配）、管理后台、代理端。三套界面共用一套接口，数据是通的，登录态走的 Token。

前端双语言切换

语言包是标准 i18n 结构，放在 src/locales 下，中文和越南语各一个 JSON。切换按钮在右上角，切完刷新也不丢，语言偏好存本地。我实测了一下越南语包，字段覆盖率大概 95% 左右，有几个按钮文案还是中文，需要自己在 JSON 里补。想加第三门语言也简单，复制一份 JSON 改名，再在入口文件里注册一下就行，不用改业务代码。

注册与资料填写流程

用户注册是手机号加验证码，验证码这块后面细说。注册完进到资料填写页，分基础信息、联系信息、补充资料三段，每段可以单独保存，填一半退出也不会丢。表单做了必填校验，提示语跟着语言包走。提交之后状态变成“待审核”，页面上会显示一个进度条，用户能看到自己卡在哪一步。

后台审批与状态文案自定义

这块是我觉得比较实用的地方。后台审批列表支持按状态筛选，点详情能看到用户填的全部资料，通过或驳回都是两键操作。驳回的时候可以填备注，备注会显示在用户端。

亮点提示：审批状态的显示文字在后台就能改，不用动代码。比如“待审核”你想改成“资料审核中”，“已通过”改成“审核完成”，直接在状态配置里替换文案，前端实时生效。做多地区运营的时候这个功能很省事。

二、部署要点：环境、短信和权限

环境与打包

Node 版本建议 16 以上，我一开始用 14 打包，有个依赖报 optional chaining 的语法错，升到 16 就没事了。前端 npm install 之后 npm run build，产物丢 Nginx 就行，记得配 try_files 做 history 路由兜底，不然刷新页面会 404。接口地址写在环境变量文件里，别直接改源码，后面换域名方便。

短信接口可接可不接

系统默认带的是国际短信对接位，配置文件里留了请求地址和密钥两个字段。要接的话，把服务商的接口地址、模板 ID 填进去就能跑；不想接也行，把验证码开关关掉，改成固定验证码或者走邮箱验证，适合内部演示环境。我第一次联调的时候防火墙没放行出站，短信一直发不出去，排查了半小时才发现是网络策略的问题，这里提醒一句。