CloudProxyPro/README.md
2025-09-11 12:08:47 +08:00

4.1 KiB
Raw Blame History

CloudProxy Pro

一个专业的AWS云解决方案网站使用Nuxt 3构建支持多语言国际化。

🌟 项目特性

  • 现代化技术栈: 基于 Nuxt 3 + Vue 3 + TypeScript
  • 多语言支持: 支持英语、简体中文、繁体中文
  • 响应式设计: 使用 Tailwind CSS 构建的现代化UI
  • SEO优化: 内置站点地图、robots.txt和SEO元数据
  • 内容管理: 使用 Nuxt Content 进行博客内容管理
  • 静态生成: 支持SSG静态站点生成

🚀 技术栈

  • 框架: Nuxt 3
  • UI库: Tailwind CSS + Headless UI
  • 图标: Heroicons
  • 国际化: @nuxtjs/i18n
  • 内容管理: @nuxt/content
  • SEO: @nuxtjs/sitemap + @nuxtjs/robots
  • 开发工具: Nuxt DevTools

📁 项目结构

web7-published/
├── content/                 # 博客内容
│   ├── en/                 # 英文内容
│   ├── zh/                 # 简体中文内容
│   └── zh-hant/            # 繁体中文内容
├── layouts/                # 布局组件
├── locales/                # 国际化语言文件
├── pages/                  # 页面路由
│   ├── blog/               # 博客页面
│   ├── contact.vue         # 联系页面
│   ├── pricing.vue         # 价格页面
│   └── solutions.vue       # 解决方案页面
├── public/                 # 静态资源
├── nuxt.config.ts          # Nuxt配置
└── tailwind.config.js      # Tailwind配置

🛠️ 开发环境设置

前置要求

  • Node.js 18+
  • npm 或 yarn

安装依赖

npm install

开发服务器

npm run dev

访问 http://localhost:3000 查看网站。

构建生产版本

# 构建静态站点
npm run generate

# 构建SSR应用
npm run build

预览生产版本

npm run preview

🌐 多语言支持

项目支持以下语言:

  • 英语 (en) - 默认语言
  • 简体中文 (zh)
  • 繁体中文 (zh-hant)

语言文件位于 locales/ 目录下,内容文件位于 content/ 目录下对应的语言文件夹中。

📝 内容管理

添加博客文章

  1. content/ 目录下选择对应语言文件夹
  2. 创建新的 Markdown 文件
  3. 在文件头部添加frontmatter
---
title: "文章标题"
description: "文章描述"
date: "2024-01-15"
tags: ["标签1", "标签2"]
image: "/images/blog/article.jpg"
slug: "article-slug"
---

更新翻译

  1. 编辑 locales/ 目录下对应的语言文件
  2. 添加或修改翻译键值对
  3. 在组件中使用 $t('key') 调用翻译

🎨 样式定制

项目使用 Tailwind CSS 进行样式管理:

  • 配置文件:tailwind.config.js
  • 主要样式类在组件中定义
  • 支持响应式设计和暗色模式

🔧 配置说明

Nuxt 配置 (nuxt.config.ts)

  • 国际化: 配置多语言支持和语言检测
  • SEO: 站点地图和robots.txt配置
  • 模块: 启用的Nuxt模块列表
  • SSG: 静态站点生成配置

环境变量

创建 .env 文件来配置环境变量:

# 站点URL
NUXT_PUBLIC_SITE_URL=https://cloudproxy-pro.com

# 其他配置...

📱 页面说明

  • 首页 (/): 展示主要特性和服务介绍
  • 解决方案 (/solutions): AWS云服务解决方案详情
  • 价格 (/pricing): 服务定价方案
  • 博客 (/blog): 技术文章和新闻
  • 联系我们 (/contact): 联系表单和联系信息

🚀 部署

静态部署

npm run generate

生成的文件在 dist/ 目录,可以部署到任何静态托管服务。

服务器部署

npm run build
npm run preview

📞 联系信息

📄 许可证

本项目为私有项目,版权所有 © 2024 CloudProxy Pro。

🤝 贡献

如需贡献代码或报告问题,请联系开发团队。


CloudProxy Pro - 为现代企业提供专业的AWS云解决方案