b344f1930e96bdf222c9b4a13a8d2078f01f733f
Arcticnewone 个人网站
北极新一(Arcticnewone)的个人网站,提供个人介绍、作品集、工作室服务、动态资讯、工具箱与联系页面,是一个现代化的展示型站点。
技术栈
- Nuxt 4 — 应用框架(服务端渲染 + 静态生成)
- Vue 3 — 视图层
- Tailwind CSS — 样式方案(通过
@nuxtjs/tailwindcss集成) - GSAP — 页面动画(配合 Lenis 平滑滚动)
- Pinia — 状态管理
- @nuxtjs/i18n — 国际化(中/英双语)
- @nuxt/icon — 图标
- pnpm — 包管理器
本地开发
环境要求
- Node.js ≥ 20(推荐 22,与 Docker 构建镜像一致)
- pnpm ≥ 9
安装与启动
# 1. 安装依赖
pnpm install
# 2. 启动开发服务器(默认 http://localhost:3000)
pnpm dev
开发服务器启动后访问 http://localhost:3000,代码修改会热更新生效。
常用命令
| 命令 | 说明 |
|---|---|
pnpm dev |
启动开发服务器 |
pnpm build |
构建生产版本(生成 .output/) |
pnpm generate |
静态站点生成(输出到 dist/) |
pnpm preview |
本地预览生产构建 |
pnpm start |
以 Node 方式启动 .output/server/index.mjs |
项目结构
.
├── app/ # 应用源码(Nuxt 4 约定目录)
│ ├── app.vue # 应用入口(全局 SEO / Meta)
│ ├── assets/ # 静态资源(样式、图片等)
│ ├── components/ # 组件(common / home)
│ ├── composables/ # 组合式函数
│ ├── layouts/ # 布局
│ ├── pages/ # 页面(首页、工作室、作品、动态、工具、联系)
│ ├── plugins/ # 插件(如 Lenis 平滑滚动)
│ ├── stores/ # Pinia 状态
│ └── types/ # 类型定义
├── i18n/
│ └── locales/ # 国际化文案(zh.json / en.json)
├── public/ # 公开静态文件(favicon、robots.txt 等)
├── Dockerfile # 容器镜像构建
├── Jenkinsfile # CI/CD 流水线(构建、推送镜像、部署容器)
├── build-and-push.sh # 手动构建并推送镜像脚本
├── docker-compose.yml # 本地容器编排
├── nuxt.config.ts # Nuxt 配置(模块、i18n、Tailwind 等)
├── tailwind.config.js # Tailwind 配置
└── package.json # 项目依赖与脚本
构建与部署
生产构建:
pnpm build
构建产物输出到 .output/,可直接通过 pnpm start 或容器运行。
当前部署相关文件位于仓库根目录(deploy/ 目录暂未创建,后续按团队规范存放生产部署 k8s 配置):
Dockerfile— 多阶段构建:安装依赖 → 构建 → 仅保留.output/运行产物Jenkinsfile— Jenkins 流水线:构建镜像 → 推送到镜像仓库 → 部署容器build-and-push.sh— 手动构建并推送镜像,凭据通过环境变量REGISTRY_USERNAME/REGISTRY_PASSWORD提供docker-compose.yml— 本地容器编排,宿主机 3100 端口映射容器 3000 端口
手动构建并推送镜像:
REGISTRY_USERNAME="<用户名>" REGISTRY_PASSWORD="<密码>" ./build-and-push.sh
注意:不要在命令中明文写入密码,凭据请通过环境变量或 CI 的凭据管理注入。
国际化(i18n)
项目使用 @nuxtjs/i18n 实现中/英双语:
- 语言文件位于
i18n/locales/:zh.json(中文)、en.json(英文) - 默认语言为中文(
defaultLocale: 'zh'),URL 不包含语言前缀(strategy: 'no_prefix'),不自动探测浏览器语言 - 组件中通过
useI18n()的t()方法读取文案,例如t('nav.home')
新增文案时,在 zh.json 和 en.json 中同步添加对应键即可。
说明
本项目不含任何密钥或敏感信息;本地环境变量请使用 .env 文件(已被 .gitignore 忽略)。
Description
Languages
Vue
93.8%
TypeScript
3.9%
Shell
1.4%
Dockerfile
0.5%
CSS
0.3%
Other
0.1%