项目部署

在部署项目之前，我们需要先将代码托管到 GitHub 上。

创建 GitHub 仓库

登录 GitHub 账号
点击右上角的 ”+” 按钮，选择 “New repository”
填写仓库信息：
- Repository name: web-toolbox
- Description: 在线工具箱项目
- Visibility: Public
- Initialize with: README
点击 “Create repository” 创建仓库

提交代码

# 添加远程仓库
git remote add origin [email protected]:你的用户名/web-toolbox.git

# 创建并切换到 main 分支
git checkout -b main

# 添加所有文件
git add .

# 提交代码
git commit -m "初始化项目"

# 推送到远程仓库
git push -u origin main

Netlify 部署

Netlify 是一个现代化的静态网站托管平台，提供了自动化部署、CDN 分发等功能。

注册 Netlify

访问 Netlify 官网
使用 GitHub 账号登录
完成账号设置

配置部署

点击 “New site from Git”
选择 GitHub 作为代码源
授权 Netlify 访问你的 GitHub 仓库
选择 web-toolbox 仓库
配置构建设置：
- Build command: npm run build
- Publish directory: dist
- Node.js version: 16

环境变量配置

在 Netlify 的项目设置中添加必要的环境变量：

进入项目设置 > Build & deploy > Environment
添加以下环境变量：
- JUHE_API_KEY: 聚合数据 API 密钥
- NUXT_PUBLIC_API_BASE: API 基础 URL

自动化部署

配置 GitHub Actions

创建 .github/workflows/deploy.yml 文件：

name: Deploy to Netlify

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build
        env:
          JUHE_API_KEY: ${{ secrets.JUHE_API_KEY }}
          NUXT_PUBLIC_API_BASE: ${{ secrets.NUXT_PUBLIC_API_BASE }}

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v2
        with:
          publish-dir: './dist'
          production-branch: main
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

配置 GitHub Secrets

在 GitHub 仓库设置中添加以下 secrets：
- JUHE_API_KEY: 聚合数据 API 密钥
- NUXT_PUBLIC_API_BASE: API 基础 URL
- NETLIFY_AUTH_TOKEN: Netlify 访问令牌
- NETLIFY_SITE_ID: Netlify 站点 ID

性能优化

代码分割

Nuxt.js 默认支持自动代码分割，但我们可以通过以下方式进一步优化：

使用动态导入组件：

<script setup>
const WeatherCard = defineAsyncComponent(() =>
  import('~/components/WeatherCard.vue')
)
</script>

配置路由级别的代码分割：

export default defineNuxtConfig({
  experimental: {
    payloadExtraction: true
  },
  routeRules: {
    '/tools/**': { swr: true }
  }
})

静态资源优化

图片优化：

<template>
  <nuxt-img
    src="/images/logo.png"
    width="200"
    height="100"
    format="webp"
    loading="lazy"
  />
</template>

配置资源缓存：

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/images/**': { headers: { 'cache-control': 'max-age=31536000' } }
    }
  }
})

SEO 优化

配置页面元数据：

<script setup>
useHead({
  title: '在线工具箱',
  meta: [
    {
      name: 'description',
      content: '功能丰富的在线工具箱，包含天气查询、快递查询、汇率转换等实用工具'
    }
  ]
})
</script>

添加 sitemap：

export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  sitemap: {
    hostname: 'https://your-domain.com'
  }
})

域名配置

在 Netlify 的域名设置中添加自定义域名
配置 DNS 记录：
- 添加 CNAME 记录指向 Netlify 提供的域名
- 等待 DNS 解析生效

监控与维护

使用 Netlify Analytics 监控网站访问情况
定期检查并更新依赖包：

# 检查更新
npm outdated

# 更新依赖
npm update

监控网站性能：
- 使用 Lighthouse 进行性能评分
- 定期检查并优化加载速度
- 监控错误日志

总结

通过本文的指导，我们完成了：

项目代码托管到 GitHub
Netlify 自动化部署配置
性能优化和 SEO 设置
域名配置和网站维护

现在，你的在线工具箱项目已经成功部署到线上环境，可以被用户访问使用了。记得定期维护和更新，确保网站始终保持良好的性能和用户体验。