Vue概率模拟系统搭建实录：前后端分离游戏平台部署笔记
声明：本文仅供技术学习参考，不构成任何投资建议或运营指导；任何实际部署必须遵守当地法律法规，禁止用于任何违法违规用途。
上个月接了个客户的需求，要搭一套前后端分离的概率模拟演示系统，前端用Vue3写的，后台功能挺全，支持TG机器人推送、多语言切换、数据统计面板这些。整个部署过程踩了不少坑，这里整理成笔记分享给需要的朋友。
系统功能实测
这套源码拿到手先在本地跑了一遍，前端是纯Vue单页应用，打包后就是静态文件，部署很方便。后台管理端功能比较完整：
核心模块配置
管理后台可以直接配置概率参数、用户等级规则、返奖比例这些。系统内置了几种常见的随机数算法模拟，可以调整权重。我测试的时候发现后台有实时数据监控面板，能看到当前在线用户数、当日流水统计，这个对运营很实用。
支付接口方面预留了主流第三方通道的对接位置，需要自己去申请商户号填进去。TG推送功能用的是Bot API，在后台填机器人token就能实现消息通知，这个我调试了半天才搞明白回调地址的配置方式。
前端技术栈
前端用的Vue3 + Vite构建，组件库是Element Plus。代码结构还算清晰，api接口都封装在单独的services目录。多语言用的vue-i18n，默认支持中英文，语言包在locales文件夹里，要加其他语言自己复制一份翻译就行。
亮点提示：这套源码前后端完全分离，前端编译后是纯静态文件，可以直接丢CDN加速，后端API独立部署，扩展性比较好。适合需要做多端适配或者后期要做原生APP的项目。
部署踩坑记录
环境准备
服务器我用的2核4G配置，系统是CentOS 7.6。前端构建需要Node.js环境，建议用14以上版本，我最开始用Node 12编译报错，升级到16就正常了。后端API是PHP写的，需要配置Nginx + PHP-FPM，数据库用MySQL 5.7。
安装依赖的时候记得切换npm镜像源，不然下载速度慢得要命。我用的淘宝镜像：npm config set registry https://registry.npmmirror.com
前端编译部署
进入前端目录先执行 npm install 安装依赖，然后修改 .env.production 文件里的API接口地址，改成你后端实际的域名。编译命令是 npm run build，打包完成后dist目录里就是编译好的静态文件。
把dist目录上传到服务器，配置Nginx指向这个目录。注意要配置history模式的路由回退，不然刷新页面会404。Nginx配置里加一条：try_files $uri $uri/ /index.html;
后端API配置
后端代码上传后先导入数据库文件，然后修改配置文件里的数据库连接信息。有个坑是默认的数据库前缀可能跟你导入的不一致，要检查一下config文件里的表前缀设置。
API接口需要配置跨域，在Nginx配置里加上CORS响应头，允许前端域名访问。伪静态规则要配置好，不然接口访问不到。
适合哪些场景
这套系统比较适合做概率模拟演示、游戏机制研究、算法测试这类场景。前后端分离的架构方便后期扩展，可以基于现有代码二开成其他类型的互动平台。
如果你是接外包项目，这套代码可以当模板快速交付。功能模块化做得不错，要加新功能或者改界面都比较方便。不过要注意，这类系统一定要用在合法合规的场景，千万别碰红线。
二次开发建议
代码注释不算多，需要一定Vue基础才能看懂。建议先把路由结构和状态管理逻辑理清楚，主要的业务代码在views和store目录。API接口的响应格式比较统一，二开的时候保持这个格式就不用大改前端代码。
UI组件用的Element Plus，要改样式的话直接覆盖组件的CSS变量就行。整体配色在assets/styles目录的全局样式文件里定义，改起来比较集中。
常见问题
问：编译的时候报node-sass错误怎么办?
答：这套代码用的是dart-sass，不需要node-sass。如果报错检查package.json里的依赖版本，把sass和sass-loader更新到最新稳定版。我遇到过一次是Node版本太旧导致的，升级Node到16以上就解决了。
问：部署后API接口调用失败?
答：先检查浏览器控制台的报错信息。大概率是跨域问题或者接口地址配置错误。跨域要在后端Nginx配置CORS响应头，接口地址要确认.env.production文件里配置的是否正确，注意最后不要带斜杠。
问：TG机器人推送功能怎么配置?
答：先在Telegram里找@BotFather创建机器人，拿到token后填到后台设置里。然后要把你的服务器IP加到Telegram的白名单，回调地址配置成你的API域名+回调路由。测试的时候可以先用webhook调试工具看请求是否能收到。
问：多语言包怎么新增?
答：进入前端代码的src/locales目录，复制zh-CN.js文件改名比如ja-JP.js，翻译里面的文本内容。然后在i18n配置文件里导入这个语言包，在语言切换组件里加上对应选项就行。
问：后台数据统计不准确?
答：检查服务器时区设置是否正确，还有数据库连接的时区参数。这套系统的统计是基于数据库记录时间计算的，时区不对会导致统计偏差。可以在php.ini和mysql配置里统一设置时区。
整个搭建过程记录下来大概就是这些，有些细节可能因为环境不同会遇到不一样的问题。建议部署前先在本地测试环境完整跑一遍，熟悉整个流程再上服务器操作。
免责声明：本文仅作技术交流学习用途，请严格遵守法律法规，禁止将系统用于任何违法违规用途。使用者需自行承担相应法律责任。
声明：本文仅供技术学习参考，不构成任何投资建议或运营指导；任何实际部署必须遵守当地法律法规，禁止用于任何违法违规用途。
-
Alipay QR Code Scan
-
WeChat Scan Pay
