2025-01-07-nuxt3项目架构演进思考

10 分钟阅读
nuxt3

前言

最近一直在进行 nuxt3 项目的开发，开发过程中遇到了许多问题，在解决问题的过程中，也接触到了很多新的知识点，特此记录，以供反思和后续参考。

项目背景

camcard-nuxt3 项目是一个基于 nuxt3 的前端站点，主要用于 camcard 的官网。项目采用了现代化的前端技术栈和工程化实践，支持国内外多环境部署。

项目架构演进

技术栈与依赖分析

核心依赖

  1. 框架与构建
    • nuxt: ^3.14.1592 - 基础框架
    • vue: latest - 核心视图库
    • vue-router: latest - 路由管理
    • typescript - 类型支持
  2. 代码规范与提交
    • eslint - 代码规范检查
    • prettier - 代码格式化
    • husky - Git hooks管理
    • commitlint - 提交信息规范
    • lint-staged - 暂存区代码检查

工程化配置

  1. ESLint 配置详解
extends:
  'plugin:vue/vue3-recommended'
  'eslint:recommended'
  'plugin:prettier/recommended'
  '@nuxt/eslint-config'
  'prettier'
  1. Git Hooks 配置
    • commit-msg: 使用 commitlint 检查提交信息
    • pre-commit: 使用 lint-staged 检查代码规范
  2. 构建优化配置
    • NODE_OPTIONS='--max-old-space-size=5120' - 增加构建内存限制
    • sourcemap 分离存储策略
    • Docker 多阶段构建优化

CI/CD 依赖

  1. 容器化相关
    • Docker - 容器化部署
    • node:20.12.2 - 基础镜像
    • kubectl - k8s集群管理工具
  2. 集群管理
    • kubernetes - 容器编排
    • APISIX - API网关
    • configmap - 环境配置管理

环境依赖管理

  1. 包管理工具
    • pnpm: 9.14.2 - 高性能的包管理器
    • 使用 pnpm-lock.yaml 锁定依赖版本
  2. 环境配置
    • 支持多环境配置(.env文件)
    • 通过 configmap 注入环境变量
    • 环境隔离与切换机制

依赖管理最佳实践

  1. 版本控制
    • 核心依赖使用固定版本
    • 次要依赖使用语义化版本
    • 定期更新依赖检查安全漏洞
  2. 依赖优化
    • 按需加载
    • Tree-shaking
    • 代码分割
    • 依赖预构建
  3. 安全性考虑
    • 定期安全审计
    • 使用私有 npm 仓库
    • 依赖漏洞扫描

Nuxt3 配置详解

1. 基础配置

  1. 运行时配置
    runtimeConfig: {
  appCdnUrl: '',
  public: {
    // API配置
    apiApiDomestic: 'https://api-sandbox.intsig.net',
    apiApiOverseas: 'https://api-sandbox.intsig.net',
    // Google登录配置
    googleClientId: '...',
    googleCallbackPath: '/google-callback',
    // 埋点配置
    logAppid: 'cfa18362e0db6752228ff7dbd870f220',
    logProjectName: 'camcard-nuxt3'
  }
}
  2. 应用配置
    • 基础路径: baseURL = '/'
    • 开发服务器: host = '0.0.0.0', port = 10001
    • 构建优化: 启用资源压缩(compressPublicAssets)

2. 国际化支持

  1. 多语言配置
    i18n: {
  baseUrl: 'https://www.camcard.com',
  strategy: 'prefix_except_default',
  locales: [
    { code: 'en-us', language: 'en-US' },
    { code: 'zh-cn', language: 'zh-CN' },
    { code: 'ja-jp', language: 'ja-JP' },
    { code: 'ko-kr', language: 'ko-KR' },
    { code: 'zh-tw', language: 'zh-TW' },
    { code: 'de-de', language: 'de-DE' },
    { code: 'fr-fr', language: 'fr-FR' }
  ],
  defaultLocale: 'en-us'
}
  2. 语言检测策略
    • 使用浏览器语言检测
    • 支持语言切换持久化(Cookie)
    • 自动重定向到用户首选语言

3. 安全配置

  1. CSP 策略
    security: {
  nonce: true,
  headers: {
    contentSecurityPolicy: {
      'style-src': ["'self'", "'unsafe-inline'"],
      'script-src': ["'self'", "'unsafe-inline'"],
      'img-src': ["'self'", 'data:', 'blob:'],
      'font-src': ["'self'", 'https:', 'data:']
    }
  }
}
  2. 安全头配置
    • XSS 防护
    • CSRF 防护
    • Frame 保护
    • 内容类型嗅探防护

4. 模块集成

  1. 核心模块
    modules: [
  '@nuxtjs/i18n',
  '@vueuse/nuxt',
  '@pinia/nuxt',
  '@nuxt/ui',
  '@nuxtjs/tailwindcss',
  'nuxt-swiper',
  '@artmizu/nuxt-prometheus',
  'nuxt-security',
  '@element-plus/nuxt',
  '@vant/nuxt',
  'nuxt-icons'
]
  2. UI 框架集成
    • Element Plus
    • Vant
    • TailwindCSS
    • 自定义图标支持

5. 构建优化

  1. 源码映射策略
    sourcemap: {
  server: true,
  client: releaseTag !== DEFAULT_VERSION ? 'hidden' : false
}
  2. 构建配置
    • 生产环境移除 console 和 debugger
    • 自定义 sourcemap 上传路径
    • Three.js 特殊处理
  3. Vite 配置
    vite: {
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler'
      }
    }
  },
  server: {
    hmr: {
      overlay: false
    }
  }
}

6. 监控与统计

  1. Prometheus 集成
    prometheus: {
  healthCheckPath: '/api/_nuxt/health',
  prometheusPath: '/api/_nuxt/metric'
}
  2. 第三方统计
    • 百度统计集成
    • 自定义埋点配置