从Vue迁移到Nuxt实现服务端渲染：构建SEO友好的博客系统（一）

packages/blog-web/
├── public/
├── src/
│   ├── api/           # API请求
│   ├── assets/        # 静态资源
│   ├── components/    # 组件
│   ├── router/        # 路由配置
│   ├── store/         # 状态管理
│   ├── types/         # TypeScript类型
│   ├── utils/         # 工具函数
│   ├── views/         # 页面组件
│   ├── App.vue        # 根组件
│   └── main.ts        # 入口文件
├── .env               # 环境变量
├── package.json
├── tsconfig.json
└── vite.config.ts

# 进入项目根目录
cd ./packages
# 创建新的Nuxt.js项目
npx nuxi init blog-nuxt
cd blog-nuxt
# 安装依赖
pnpm install

packages/blog-nuxt/
├── .nuxt/          # Nuxt生成的文件（自动生成）
├── assets/         # 资源文件
├── components/     # 组件
├── composables/    # 组合式API
├── layouts/        # 布局组件
├── pages/          # 页面（自动生成路由）
├── plugins/        # 插件
├── public/         # 静态文件
├── server/         # 服务端代码
├── app.vue         # 应用入口
├── nuxt.config.ts  # Nuxt配置
└── package.json

# 复制环境变量
cp ./packages/blog-web/.env ./packages/blog-nuxt/.env

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: true,  // 启用服务端渲染
  runtimeConfig: {
    public: {
      apiBase: process.env.VITE_SERVICE_BASE_URL || 'http://localhost:3000'
    }
  }
})

# 安装核心依赖
pnpm add @pinia/nuxt pinia @vueuse/core
# 安装工具库
pnpm add dayjs lodash-es js-cookie
# 安装开发依赖
pnpm add -D sass @types/node @types/js-cookie
# UI组件和样式
pnpm add @unocss/nuxt

<!-- 原Vue项目: src/views/article/detail.vue -->
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const articleId = route.params.id;
</script>

<!-- Nuxt项目: pages/article/[id].vue -->
<script setup>
// useRoute自动导入，无需显式导入
const route = useRoute();
const articleId = route.params.id;
</script>

<!-- 原Vue项目 -->
<router-link to="/article/123">查看文章</router-link>

<!-- Nuxt项目 -->
<NuxtLink to="/article/123">查看文章</NuxtLink>

# 创建样式目录
mkdir -p ./packages/blog-nuxt/assets/styles
# 复制样式文件
cp ./packages/blog-web/src/assets/styles/main.scss ./packages/blog-nuxt/assets/styles/

// nuxt.config.ts
export default defineNuxtConfig({
  // ...其他配置
  css: [
    '~/assets/styles/main.scss'
  ]
})

// 原Vue项目中的变量定义
:root {
  --header-text-color: #fff;
  --nav-bg: rgba(255, 255, 255, 0.8);
  --text-color: #333;
  --card-bg: #fff;
  --body-bg: #f5f5f5;
  // ...其他变量
}

[theme="dark"] {
  --header-text-color: #eee;
  --nav-bg: rgba(30, 30, 30, 0.8);
  --text-color: #eee;
  --card-bg: #222;
  --body-bg: #1a1a1a;
  // ...其他变量
}

// 主题切换逻辑
const isDark = useDark({
  selector: 'html',
  attribute: 'theme',
  valueDark: 'dark',
  valueLight: 'light',
})
const toggle = useToggle(isDark);

// 监听主题变化，同步到应用状态
watch(isDark, (value) => {
  app.switchTheme(value ? 'dark' : 'light');
});

# 复制公共静态资源
cp -r ./packages/blog-web/public/* ./packages/blog-nuxt/public/

cd ./packages/blog-nuxt
pnpm run dev

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "types": ["node"],
    "strict": true,
    "skipLibCheck": true
  }
}

// types/nuxt.d.ts
declare global {
  const useHead: any;
  const useRoute: any;
  const useFetch: any;
  const useRuntimeConfig: any;
  const defineNuxtPlugin: any;
}

export {};