Nuxt3 项目配置指南 - nuxt.config.ts 详解

nuxt.config.ts 是 Nuxt3 项目中的配置文件，用于配置项目的各种选项。本文将详细介绍 nuxt.config.ts 中的各个配置项，帮助您更好地理解和使用 Nuxt3 项目配置。

自定义端口

将前端项目启动的端口自定义为 3030

devServer: {
  port: 3030,
},

按环境添加配置

export default defineNuxtConfig({
  // 生产环境的配置
  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  // 开发环境的配置
  $development: {
    //
  }
})

运行时的配置 runtimeConfig

export default defineNuxtConfig({
  runtimeConfig: {
    // 只在服务器端可用的私有键
    apiSecret: '123',
    // public中的键也可以在客户端使用
    public: {
      apiBase: '/api'
    }
  }
})
  • 默认情况下，这些键只在服务器端可用
  • runtimeConfig.public 中的键也可以在客户端使用

页面中通过useRuntimeConfig()组合函数获取运行时的配置

const runtimeConfig = useRuntimeConfig()

模块 modules

export default defineNuxtConfig({
  modules: [
    // 使用包名（推荐用法）
    '@nuxtjs/example',
    
    // 加载本地模块
    './modules/example',
    
    // 添加带有内联选项的模块
    ['./modules/example', { token: '123' }]
    
    // 内联模块定义
    async (inlineOptions, nuxt) => { }
  ]
})

别名 alias

手动将库别名为CJS版本

export default defineNuxtConfig({
  alias: {
    'sample-library': 'sample-library/dist/sample-library.cjs.js'
  }
})

组件 components

自定义自动导入的组件目录

  • ~/components 要写在末尾
  • pathPrefix 配置导入组件时，是否包含组件的目录（默认包含）
  • prefix 可自定义导入组件时的前缀
export default defineNuxtConfig({
  components: [
    // ~/calendar-module/components/event/Update.vue => <EventUpdate />
    { path: '~/calendar-module/components' },
    
    // ~/user-module/components/account/UserDeleteDialog.vue => <UserDeleteDialog />
    { path: '~/user-module/components', pathPrefix: false },
    
    // ~/components/special-components/Btn.vue => <SpecialBtn />
    { path: '~/components/special-components', prefix: 'Special' },
    
    // 如果您想要覆盖 `~/components` 的子目录，请确保它是最后一个
    '~/components'
  ]
})

禁用自动导入组件

export default defineNuxtConfig({
  components: {
    dirs: []
  }
})

导入 imports

配置自动导入自定义文件夹或第三方包导出的函数

imports: {
  // 自动导入 stores 文件夹中的 pinia stores 
  dirs: ['stores']
}

自动导入第三方包

范例：启用从vue-i18n包中自动导入useI18n组合式函数

imports: {
  presets: [
    {
      from: 'vue-i18n',
      imports: ['useI18n']
    }
  ]
}

禁用自动导入组合式函数和实用函数

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

渲染模式 ssr

启用仅客户端渲染

ssr: false

此时应该在 /app/spa-loading-template.html 中放置一个HTML文件，其中包含你想要用于渲染加载屏幕的HTML。

路由规则 routeRules

可按路由配置不同的渲染模式

export default defineNuxtConfig({
  routeRules: {
    // 主页在构建时预渲染
    '/': { prerender: true },
    // 产品页面按需生成，后台自动重新验证
    '/products/**': { swr: 3600 },
    // 博客文章按需生成，直到下一次部署前持续有效
    '/blog/**': { isr: true },
    // 管理仪表板仅在客户端渲染
    '/admin/**': { ssr: false },
    // 在API路由上添加cors头
    '/api/**': { cors: true },
    // 跳转旧的URL
    '/old-page': { redirect: '/new-page' }
  }
})

具体的配置项有：

  • redirect: string - 定义服务器端重定向
  • ssr: boolean - 禁用应用程序的服务器端渲染部分，使其仅支持SPA，使用ssr: false
  • cors: boolean - 使用cors: true自动添加CORS头部
  • headers: object - 为你的站点的某些部分添加特定的头部
  • swr: number|boolean - 为服务器响应添加缓存头部
  • isr: number|boolean - 行为与swr相同，除了我们能够将响应添加到支持此功能的CDN缓存中
  • prerender:boolean - 在构建时预渲染路由
  • experimentalNoScripts: boolean - 禁用Nuxt脚本的渲染和JS资源提示

构建 build

转译库

export default defineNuxtConfig({
  build: {
    transpile: ['sample-library']
  }
})

类型检查 typescript

构建时启用类型检查

export default defineNuxtConfig({
  typescript: {
    typeCheck: true
  }
})

启用严格的类型检查

export default defineNuxtConfig({
  typescript: {
    strict: true
  }
})

添加 vite 配置

export default defineNuxtConfig({
  vite: {
    vue: {
      customElement: true
    },
    vueJsx: {
      mergeProps: true
    }
  }
})

完整的 vue 配置项见 vite-plugin-vue

完整的 vueJsx 配置项见 vite-plugin-vue-jsx

添加 webpack 配置

export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      }
    }
  }
})

详见 Nuxt文档

启用实验性 Vue 功能

export default defineNuxtConfig({
  vue: {
    defineModel: true,
    propsDestructure: true
  }
})

更多配置

见官网 Nuxt配置文档

以上来自Juleon博客，转载请注明出处。