NuxtJs seo 国际化

NuxtJs实现网站内容国际化以及seo国际化

创建NuxtJs项目

yarn create nuxt-app 项目名称
# 或者npm
npm init nuxt-app 项目名称

NuxtJs创建项目的选项说明文档。
创建完项目能运行即可。

安装国际化插件

这里选用NuxtJs官方集成的Vuei18n插件。（网上各种自己集成的的真鸡儿麻烦）

yarn add @nuxtjs/i18n
# 或者npm
npm install @nuxtjs/i18n

安装完之后修改nuxt.config.js配置文件。

// nuxt.config.js
export default {
  // ...其他Nuxt配置...
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
  	// 域名，这里填写生产环境的域名即可
    baseUrl: "https://my-nuxt-app.com",
    // 语种，酌情配置即可
    locales: [
      {
        code: "en",
        iso: "en-US",
      },
      {
        code: "zh",
        iso: "zh-CN",
      },
    ],
    // 默认语种
    defaultLocale: "en",
    // 浏览器语言检测
    detectBrowserLanguage: {
      // 记录浏览器语言使用cookie保存，这里false则表明，每次进入页面都会重新获取浏览器语言
      useCookie: false,
    },
    // 国际化内容配置
    vueI18n: {
      // 回退的语种
      fallbackLocale: "en",
      // 国际化的内容
      messages: {
        en: {
          title: "page title",
          welcome: "Welcome",
        },
        zh: {
          title: "网页标题",
          welcome: "欢迎",
        },
      },
    },
  },
}

内容国际化

<!-- 使用 $t("你的内容key") 语法即可 -->
<template>
  <div>{{ $t("welcome") }}</div>
</template>

<!-- 根据浏览器语言不通，这里会显示 “欢迎” 或者 “Welcome” -->

seo国际化

修改nuxt.config.js配置文件。

// nuxt.config.js
export default {
  // ...其他Nuxt配置...
  head() {
    const i18nHead = this.$nuxtI18nHead({ addSeoAttributes: true });
    i18nHead.title = this.$t("title");
    return i18nHead;
  },
}

根据浏览器语言不同，标题会发生相对于的变化，其他seo属性酌情配置即可。

将翻译内容抽出配置

在根目录下创建i18n文件夹，且分别创建语种翻译js文件与index.js文件。

• 根目录
  • i18n
    • index.js
    • zh.js
    • en.js

index.js

import en from "./en"
import zh from "./zh"

export default { en, zh }

en.js 、 zh.js

// en.js
export default {
  title: "page title",
  welcome: "Welcome",
};

// zh.js
export default {
  title: "网页标题",
  welcome: "你好",
};

配置nuxt.config.js

// 引入外部语种翻译
import i18n from "./i18n"

i18n: {
    // 省略中间部分
    vueI18n: {
      fallbackLocale: "en",
      messages: {
        ...i18n,// 使用外部语种翻译
      },
    },
  },