Nuxt3学习总结（05）

nuxt.config.ts 配置详解

nuxt.config.ts 文件中常见配置选项：

import type { NuxtConfig } from 'nuxt';

const config: NuxtConfig = {
  // 全局页面标题: https://go.nuxtjs.dev/config-head
  head: {
    title: 'My App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // 全局 CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // 页面装载之前的插件: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // 自动导入组件: https://go.nuxtjs.dev/config-components
  components: true,

  // 开发和构建的模块 (推荐): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // 模块: https://go.nuxtjs.dev/config-modules
  modules: [],

  // 构建配置: https://go.nuxtjs.dev/config-build
  build: {},

  // 服务器配置: https://nuxtjs.org/docs/3.x/features/nuxt-server#configure-http-server
  server: {
    port: 3000, // 默认: 3000
    host: '0.0.0.0' // 默认: localhost
  }
}

export default config;

• head：该属性用于配置应用程序的 HTML 标头。在此处可以定义标题、元标记和链接到外部文件（例如样式表和 favicon）。

• css：该属性用于定义应该包含在应用程序中的 CSS 文件。

• plugins：该属性用于定义应包含在应用程序中的插件。

• components：该属性设置是否应自动从 components/ 目录中导入组件。

• buildModules：该属性用于定义应在构建过程中使用的模块（例如 @nuxt/typescript-build、@nuxtjs/tailwindcss）。

• modules：该属性用于定义应导入到应用程序中的模块。

• build：该属性用于配置应用程序的构建过程。您可以通过定义选项来自定义构建过程，例如输出目录、用于块和文件的文件名以及要使用的插件。

• server：该属性用于配置 HTTP 服务器。您可以定义服务器应监听的端口和主机。

Nuxt 只认 nuxt.config.ts，因此一些大家熟悉的独立配置文件会被忽略，作为替代，nuxt.config.ts 中会有对应的配置项，如 postcss、vite、webpack.

app.config.ts 配置详解

app.config配置文件公开应用程序中的响应性配置，能够在生命周期内的运行时更新它，或者使用nuxt插件并使用HMR(热模块替换)编辑它。

export default defineAppConfig({
  accessKey: 'key'
})

不能把一些涉密的值放在app.config文件，可以使用.evn这样的配置文件配置环境变量，将覆盖app.config配置文件中的配置

app.config.ts 中配置

   // 只能用于服务端的 keys
    apiKey: 'test',
    // 可用于客户端的 keys
    public: {
      apiBase: '/api'
    }

.evn文件,需要加NUXT_前缀，且需要转为大写

NUXT_API_KEY=api_token
NUXT_PUBLIC_API_BASE=https://test.com

端口号配置

{
  "scripts": {
    "dev": "nuxt dev --port=8080"
  }
}

useHead

Nuxt 提供了一个 useHead() 可以在组件内修改 meta 信息

可在每个页面单独设置信息

useHead({
  title: '文章详情'
})

可以设置标题模板

这样子页面如果设置了title，就能拼接上该模板，一起展示。

Nuxt 还提供了多种组件可以在模板中设置具体页面页头信息：