NuxtJs实现网站内容国际化以及seo国际化
创建NuxtJs项目
yarn create nuxt-app 项目名称# 或者npmnpm init nuxt-app 项目名称NuxtJs创建项目的选项说明文档。
创建完项目能运行即可。
安装国际化插件
这里选用NuxtJs官方集成的Vuei18n插件。（网上各种自己集成的的真鸡儿麻烦）
yarn add @nuxtjs/i18n# 或者npmnpm install @nuxtjs/i18n安装完之后修改nuxt.config.js配置文件。
// nuxt.config.jsexport 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.jsexport 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
- i18n
index.js
import en from "./en"import zh from "./zh"export default { en, zh }en.js 、 zh.js
// en.jsexport default { title: "page title", welcome: "Welcome",};// zh.jsexport default { title: "网页标题", welcome: "你好",};配置nuxt.config.js
// 引入外部语种翻译import i18n from "./i18n"i18n: { // 省略中间部分 vueI18n: { fallbackLocale: "en", messages: { ...i18n,// 使用外部语种翻译 }, }, },