SBTI人格测试 - 源码分享

原创已于 2026-04-15 14:18:24 修改 · 694 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端

于 2026-04-10 20:33:44 首次发布

SBTI人格测试 - 源码分享（Vue3 可直接部署）

哈喽大家好👋，最近MBTI人格测试火遍全网，很多朋友都想做一个自己的人格测试网页，今天给大家分享一个基于 Vue3 开发的SBTI人格测试完整开源项目，开箱即用，直接部署就能上线！

🎯 项目介绍

SBTI-vue 是一个完全开源的人格测试前端项目，在经典MBTI测试的基础上做了维度拓展，支持更丰富的人格解读，同时做了轻量化优化，适合个人部署、二次开发，甚至可以直接用来做流量变现的趣味测试工具。

✨ 核心特性

✅ Vue3 原生开发：无冗余依赖，打包体积小，加载速度快
✅ 完整测试流程：从答题、计分、维度匹配到结果生成，全链路闭环
✅ 26种人格结果：15个测试维度，30道常规题+2道特殊题，覆盖更全面的人格类型
✅ 响应式设计：完美适配手机、平板、PC端，适配公众号/小程序H5
✅ 高度可自定义：题目、维度、结果文案、样式全可改，轻松二次开发
✅ 开源免费商用：MIT协议，无版权风险，可直接用于个人/商业项目

在线体验
🌍 🔍 ===>【人格剧本-测了个准】

📦 源码获取

GitHub 仓库地址

https://github.com/catnip-official/SBTI-vue3

直接克隆仓库到本地即可：

git clone https://github.com/catnip-official/SBTI-vue3.git
cd SBTI-vue3

📂 完整项目结构详解

sbti-vue/
├── public/
│   └── image/                # 人格类型结果图片、分享海报等静态资源
├── src/
│   ├── assets/
│   │   └── main.css          # 全局样式、CSS变量、主题色配置
│   ├── components/           # 可复用UI组件
│   │   ├── ProgressBar.vue   # 答题进度条组件
│   │   └── QuestionCard.vue  # 题目卡片组件（单选/多选交互）
│   ├── composables/
│   │   └── useTest.js        # 核心测试逻辑：出题、计分、维度匹配、结果计算
│   ├── data/                 # 核心业务数据配置
│   │   ├── dimensions.js     # 15个测试维度定义与维度解读文案
│   │   ├── questions.js      # 30道常规题 + 2道特殊题的完整题库
│   │   └── types.js          # 26种人格类型定义、匹配规则与详细解读
│   ├── router/
│   │   └── index.js          # 路由配置（首页/答题页/结果页）
│   ├── store.js              # 全局状态单例（Pinia替代方案，轻量状态管理）
│   ├── views/                # 页面组件
│   │   ├── IntroView.vue     # 测试首页（引导页、规则说明）
│   │   ├── TestView.vue     # 答题页（题目渲染、进度控制）
│   │   └── ResultView.vue   # 结果页（人格类型展示、详细解读、分享功能）
│   ├── App.vue              # 根组件
│   └── main.js              # 项目入口文件
├── index.html               # HTML入口模板（可插入统计/广告代码）
├── package.json             # 项目依赖与脚本配置
└── vite.config.js           # Vite构建配置（打包、代理、端口等）

🧠 核心测试逻辑简述

1. 维度与计分逻辑

项目基于15个独立人格维度设计，每道题目对应1-2个维度的正负向计分：

用户完成32道题目后，系统会自动计算每个维度的得分，生成维度雷达图
根据维度得分的组合，匹配26种预设的人格类型，生成专属人格报告

2. 核心流程

首页引导：IntroView.vue 加载测试说明，用户点击「开始测试」进入答题页
答题阶段：TestView.vue 渲染题目卡片，useTest.js 控制题目顺序、进度条、答案存储
计分匹配：答题完成后，useTest.js 自动计算维度得分，匹配对应人格类型
结果展示：ResultView.vue 渲染人格类型、详细解读、分享海报，支持一键分享

🚀 本地运行 & 部署教程

1. 环境要求

Node.js 16+ （推荐 18.x LTS 版本）
npm / yarn / pnpm 包管理器

2. 本地运行

# 安装依赖
npm install
# 启动开发服务器
npm run dev

启动后访问 http://localhost:5173 即可查看完整效果。

3. 打包部署

# 打包生产环境代码
npm run build

打包完成后，dist 文件夹就是可直接部署的静态资源，支持：

部署到 Vercel / Netlify / 阿里云OSS / 腾讯云COS
部署到自己的服务器（Nginx 反向代理即可）
打包成微信小程序/抖音小程序H5，嵌入公众号

🔧 自定义修改指南

1. 快速修改核心内容

需求	修改文件	说明
修改测试题目	`src/data/questions.js`	自定义题目、选项、对应维度、计分规则
修改人格维度	`src/data/dimensions.js`	新增/修改维度定义、维度解读文案
修改人格结果	`src/data/types.js`	自定义26种人格的解读、标签、配图
修改主题样式	`src/assets/main.css`	修改全局CSS变量，适配品牌色
插入广告/统计	`index.html`	直接插入百度统计、Google Analytics、广告联盟代码