Nuxt 3配置迁移指南：从Nuxt 2到Nuxt 3的平滑过渡-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00272/article/details/148324411

Nuxt 3配置迁移指南：从Nuxt 2到Nuxt 3的平滑过渡

nuxt The Intuitive Vue Framework. 项目地址: https://gitcode.com/gh_mirrors/nu/nuxt

前言

随着Nuxt 3的正式发布，许多开发者正计划将现有项目从Nuxt 2迁移至Nuxt 3。配置文件的调整是迁移过程中的关键环节，本文将深入解析Nuxt 3配置系统的变化，并提供详细的迁移指导。

核心配置文件的变化

1. 配置函数与类型支持

Nuxt 3引入了defineNuxtConfig函数，这是配置系统的重大改进：

// Nuxt 3推荐写法
export default defineNuxtConfig({
  // 你的配置项
})

与Nuxt 2的直接导出对象不同，defineNuxtConfig提供了：

完整的TypeScript类型支持
更好的代码提示
配置项验证

2. 路由配置迁移

路由系统的配置方式发生了显著变化：

路由扩展

// Nuxt 2方式
export default {
  router: {
    extendRoutes(routes) {
      // 路由扩展逻辑
    }
  }
}

// Nuxt 3方式
export default defineNuxtConfig({
  hooks: {
    'pages:extend'(routes) {
      // 新的路由扩展逻辑
    }
  }
})

路由命名分隔符

Nuxt 3不再直接支持routeNameSplitter配置项，但可以通过钩子实现相同功能：

export default defineNuxtConfig({
  hooks: {
    'pages:extend'(routes) {
      const routeNameSplitter = '/'
      // 自定义路由命名逻辑
    }
  }
})

模块系统升级

Nuxt 3的模块系统进行了重大重构：

统一模块声明：不再区分buildModules和modules，所有模块都在modules数组中声明

本地模块引用：需要明确指定入口文件路径

modules: [
-  '~/modules/my-module'
+  '~/modules/my-module/index'
]

目录结构调整

Nuxt 3对项目目录结构进行了优化：

static/目录更名为public/（可通过配置保留原名称）
新增.nuxt目录存放构建产物
类型定义文件位置调整

TypeScript集成增强

Nuxt 3提供了开箱即用的TypeScript支持：

创建基础tsconfig.json：

{
  "extends": "./.nuxt/tsconfig.json"
}

执行npx nuxt prepare生成类型定义
推荐使用Volar扩展获得最佳开发体验

Vue生态系统变更

Vuex替代方案

Nuxt 3默认不再集成Vuex，推荐使用Pinia：

安装依赖：
```
yarn add pinia @pinia/nuxt
```

配置模块：

export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

创建store：

// store/index.ts
import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
  },
})