一、vue-XiuXianGame介绍

1.1 vue-XiuXianGame简介

vue-XiuXianGame 是一个基于 Vue.js 框架开发的文字修仙类游戏开源项目。该游戏以文字冒险为核心玩法，玩家通过阅读和选择不同的剧情走向来体验修仙世界的奇妙旅程。

• vue-XiuXianGame 是一款将中国传统文化中的修仙元素与现代互动小说形式相结合的游戏。它为玩家提供了一个沉浸式的修仙世界，在这个世界里，玩家可以修炼功法、探索秘境、结交道友等。
• 采用 Vue.js 作为其前端框架，使得游戏具有良好的响应式设计和高效的组件化开发能力。
• 使用了 Element Plus 作为UI库，提供了美观且一致的用户界面组件，增强了用户体验。
• 利用 Pinia 作为状态管理库，简化了复杂应用中状态管理的过程，提高了代码的可维护性和扩展性。

1.2 主要特点

1. 丰富的剧情内容：包含多种分支剧情，玩家的选择会影响后续的发展方向，增加了游戏的重复游玩价值。
2. 角色成长系统：玩家可以通过修炼、完成任务等方式提升自己的修为等级，解锁更多技能和能力。
3. 交互性：除了主线剧情外，还有各种支线任务和随机事件，增加了游戏的互动性和趣味性。
4. 社区和多人元素：支持玩家之间的交流和互动，如组队探险、交易物品等，构建了一个活跃的游戏社区。
5. 开放源码：作为一个开源项目，开发者可以根据自己的需求进行修改和扩展，非常适合想要学习或贡献于开源社区的开发者们。

二、本次实践规划

2.1 本地环境规划

本次实践为个人测试环境，操作系统版本为|Ubuntu 22.04.1。

hostname	IP地址	操作系统版本	Docker版本	部署项目
jeven01	192.168.3.88	Ubuntu 22.04.1 LTS	27.1.1	vue-XiuXianGame

2.2 本次实践介绍

1.本次实践部署环境为个人测试环境，生产环境请谨慎；
2.在Docker环境下部署vue-XiuXianGame文字修仙小游戏。

三、本地环境检查

3.1 检查Docker服务状态

检查Docker服务是否正常运行，确保Docker正常运行。

root@jeven01:~# systemctl status docker
● docker.service - Docker Application Container Engine
     Loaded: loaded (/lib/systemd/system/docker.service; enabled; vendor preset: enabled)
     Active: active (running) since Wed 2025-04-02 05:59:08 UTC; 4min 6s ago
TriggeredBy: ● docker.socket
       Docs: https://docs.docker.com
   Main PID: 906 (dockerd)
      Tasks: 29
     Memory: 143.2M
        CPU: 1.172s
     CGroup: /system.slice/docker.service

3.2 检查Docker版本

检查Docker版本

root@jeven01:~# docker -v
Docker version 27.1.1, build 6312585

3.3 检查docker compose 版本

检查Docker compose版本，确保2.0以上版本。

root@jeven01:~# docker compose version
Docker Compose version v2.19.1

四、拉取镜像

拉取vue-XiuXianGame镜像，拉取相关镜像如下所示：

root@jeven01:~# docker pull setube/vue-xiuxiangame
Using default tag: latest
latest: Pulling from setube/vue-xiuxiangame
fd0410a2d1ae: Pull complete
bf571be90f05: Pull complete
684a51896c82: Pull complete
fbf93b646d6b: Pull complete
6ec6ad1ddcfd: Pull complete
1ef32208f9d7: Pull complete
bd8f51f2401a: Pull complete
0c12196e597a: Pull complete
5377ad554cb1: Pull complete
4f4fb700ef54: Pull complete
f7a09c30a5cb: Pull complete
a310fa9ffd0d: Pull complete
ab91ff286b4e: Pull complete
837cf28c7103: Pull complete
Digest: sha256:9bb8be6dc48663be5cdb79aec7a82cc7121537063abd75f57334255c12e4391f
Status: Downloaded newer image for setube/vue-xiuxiangame:latest
docker.io/setube/vue-xiuxiangame:latest

五、部署vue-XiuXianGame小游戏

5.1 创建部署目录

• 创建部署目录

mkdir -p /data/vue-XiuXianGame &&  cd /data/vue-XiuXianGame

5.2 编辑部署文件

在`部署目录下，创建docker-compose.yaml文件，如下所示：

vim docker-compose.yaml

version: '3.9'
services:
    vue-xiuxiangame:
        image: setube/vue-xiuxiangame:latest
        # You can also change it to setube/vue-xiuxiangame
        ports:
            - '8080:8080'
        container_name: xiuxian
        tty: true
        stdin_open: true

5.3 创建vue-XiuXianGame容器

执行以下命令，创建vue-XiuXianGame容器。

root@jeven01:/data/vue-XiuXianGame# docker compose up -d
[+] Running 2/2
  Network vue-xiuxiangame_default  Created                                                                                                       0.1s
  Container xiuxian                Started                                                                                                       0.7s

5.4 查看建vue-XiuXianGame容器状态

检查建vue-XiuXianGame容器运行状态，确保建vue-XiuXianGame容器正常启动。

root@jeven01:/data/vue-XiuXianGame# docker compose ps
NAME                IMAGE                           COMMAND                  SERVICE             CREATED              STATUS              PORTS
xiuxian             setube/vue-xiuxiangame:latest   "docker-entrypoint.s…"   vue-xiuxiangame     About a minute ago   Up 59 seconds       0.0.0.0:8080->8080/tcp, :::8080->8080/tcp

六、访问小游戏

浏览器地址： http://<个人的服务器IP>:8080，访问vue-XiuXianGame文字修仙小游戏的初始页。如果无法访问，请确保宿主机的防火墙已关闭或已放行相关端口，对于云服务器还需配置相应的安全组规则。

七、总结