nuxt要点

nuxt 需要修改的配置

css 抽离，便于 seo

 build: {
    // publicPath: '/static/',
    extractCSS: { allChunks: true }
  },

静态数据的第一次渲染使用 asyncData

asyncData 中不能使用 this

asyncData 函数中提供了 context 相当于 this

type DefaultAsyncData<V> = ((this: V, context: Context) => Promise<object | void> | object | void)

 AsyncData = DefaultAsyncData<V>

// eslint-disable-next-line @typescript-eslint/ban-types
asyncData?: AsyncData



export interface Context {
  $config: NuxtRuntimeConfig

  app: NuxtAppOptions
  base: string
  /**
   * @deprecated Use process.client instead
  */
  isClient: boolean
  /**
   * @deprecated Use process.server instead
  */
  isServer: boolean
  /**
   * @deprecated Use process.static instead
  */
  isStatic: boolean
  isDev: boolean
  isHMR: boolean
  route: Route
  from: Route
  store: Store<any>
  env: Record<string, any>
  params: Route['params']
  payload: any
  query: Route['query']
  next?: NextFunction
  req: IncomingMessage
  res: ServerResponse
  redirect(status: number, path: string, query?: Route['query']): void
  redirect(path: string, query?: Route['query']): void
  redirect(location: Location): void
  redirect(status: number, location: Location): void
  ssrContext?: {
    req: Context['req']
    res: Context['res']
    url: string
    target: NuxtOptions['target']
    spa?: boolean
    modern: boolean
    runtimeConfig: {
      public: NuxtRuntimeConfig
      private: NuxtRuntimeConfig
    }
    redirected: boolean
    next: NextFunction
    beforeRenderFns: Array<() => any>
    beforeSerializeFns: Array<() => any>
    fetchCounters: Record<string, number>
    nuxt: {
      layout: string
      data: Array<Record<string, any>>
      fetch: Array<Record<string, any>>
      error: any
      state: Array<Record<string, any>>
      serverRendered: boolean
      routePath: string
      config: NuxtRuntimeConfig
    }
  }
  error(params: NuxtError): void
  nuxtState: NuxtState
  beforeNuxtRender(fn: (params: { Components: VueRouter['getMatchedComponents'], nuxtState: NuxtState }) => void): void
  beforeSerialize(fn: (nuxtState: NuxtState) => void): void
  enablePreview?: (previewData?: Record<string, any>) => void
  $preview?: Record<string, any>
}

自定义每个页面的title 和 description 等

data() {
    return {}
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description   11111',
        },
      ],
    }
  },
  mounted() {},