Nuxt3SEO优化指南

本篇专栏基于笔者的Vue专栏，Nuxt3系列，如有不连贯之处可查看Nuxt3系列其他文章！特此说明

• Nuxt3文档
• Nuxt3中文文档

NuxtImg文档

1. <NuxtImg src="/abc.webp" width="300" height="150" alt="banner">, 图片携带alt 属性, 并且携带宽高(给个默认宽高即可)；
2. 可以适当将图片资源迁移到对象存储上，<NuxtImg provider="aliyun" src="/abc/efg.webp" alt="banner" width="150" height="150" />
3. 尽量使用webp的图像资源

import postcssConfig from "./postcss.config";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  modules: [
    ...
    "@nuxt/image",
    ...
  ],
  image: {
    inject: true,
    provider: 'twicpics', // 这里是默认的twicpics, 可以随便用provider中的任意一项，但不能用ipx，目前是存在一些问题的；
    domains: ['mom-bullet.oss-cn-shanghai.aliyuncs.com'],
    twicpics: {
      baseURL: '', // 设置空，作为默认的
    },
    aliyun: { // 配置阿里云cdn，开发时先丢到本地的public目录下，上线后，将public目录丢到cdn上即可
      baseURL: "https://mom-bullet.oss-cn-xxxx.aliyuncs.com/xxxx/public/",
    },
  },
});

nuxt i18n模块，具体请查看本系列的《Nuxt3国际化指南》