nuxt项目多语言方案

最新推荐文章于 2024-02-23 15:51:02 发布

Yi-Ren

最新推荐文章于 2024-02-23 15:51:02 发布

阅读量1k

点赞数 7

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_43480822/article/details/135675168

版权

本文详细介绍了如何在Nuxt.js项目中使用i18n进行多语言支持，包括SEO优化、hreflang配置、网站地图生成以及robots.txt的设置，确保网站在谷歌搜索引擎中的良好表现。

摘要由CSDN通过智能技术生成

多语言方案

如果要在地址栏中展示多个语言版本有两种方案

1.通过i18n

// nuxt.config.js
  i18n: {
    defaultLocale: 'zh', // 默认语言
    seo: false,
    vueI18n: {
      fallbackLocale: 'zh',
      messages: {
        en: require('./locales/en.json'), // 英文翻译文件
        zh: require('./locales/zh.json'), // 中文翻译文件
      },
    },
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected', // 可自定义cookie名称
      alwaysRedirect: true, // 如果想要始终根据浏览器语言重定向，可以设置为true
      fallbackLocale: 'zh', // 当未检测到对应语言时的回退语言
    },
    locales: [
      {
        name: 'English',
        code: 'en',
        iso: 'en-US', // 这是正确的ISO语言代码
        file: require('./locales/en.json'),
      },
      {
        name: '简体中文',
        code: 'zh',
        iso: 'zh-CN', // 这也是正确的ISO语言代码
        file: require('./locales/zh.json'),
      },
    ],
    strategy: 'prefix_except_default', // 设置为'no_prefix'表示不在路由上添加语言标识
  },

这里有几个坑
1.如果开启了seo，他会在meta中带有 hreflang = ‘/’ 指定不到你想要的域名/IP上，所以我改为false
2.strategy：有三种方式分别是：prefix_except_default、prefix、no_prefix，
prefix_except_default：默认情况在地址栏不写语言版本如果切换其他语言例如：/en
prefix:代表默认情况下也带有语言 /zh /en

通过多个子文件夹来对不同语言版本来进行管理

配置hreflang 可以根据用户不同的浏览器语言，来展示相应语言版本的网站

在上面我将SEO设置为false

我进行了手动配置

// nuxt.config.js
 link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ...generateHreflangLinks(),
    ],


function generateHreflangLinks() {
  const baseUrl = 'http://127.0.0.1'; // 根据实际情况调整为您的域名或IP

  const localeLinks = [
    { lang: 'zh', path: '/' },
    { lang: 'en', path: '/en/' }, // 如果英语路径是如此
    // 添加其他语言路径...
  ];

  return localeLinks.map((locale) => ({
    hid: `alternate-hreflang-${locale.lang}`,
    rel: 'alternate',
    href: `${baseUrl}${locale.path}`,
    hreflang: locale.lang,
  }));
}

来解决hreflang 对不同语言版本检查不同版本的问题

此网站主要做的是谷歌SEO

我们需要配置站点地图

安装@nuxtjs/sitemap
yarn add @nuxtjs/sitemap

我设定的是中英文两个版本的sitemap 我进行了封装

// sitemap.config.js

const sitemapEN = {
    path: "/sitemap-en.xml",
    hostname: "http://zecodo.com:8121/en",
    cacheTime: 1000 * 60 * 60 * 24,
    gzip: true,
    generate: false,
    exclude: [],
    defaults: {
      changefred: "always",
      lastmod: new Date(),
      priority: 1,
    },
  };
  
  const sitemapZH = {
    path: "/sitemap-zh.xml",
    hostname: "http://zecodo.com:8121/",
    cacheTime: 1000 * 60 * 60 * 24,
    gzip: true,
    generate: false,
    exclude: [],
    defaults: {
      changefred: "always",
      lastmod: new Date(),
      priority: 1,
    },
  };
  
  export { sitemapEN, sitemapZH };

在nuxt.config.js中配置

// nuxt.config.js
import { sitemapEN, sitemapZH } from "./static/sitemap.config";
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/sitemap',
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    '@nuxtjs/dayjs',
    'cookie-universal-nuxt',
    'nuxt-i18n',
  ],
  sitemap: [
    // 英文sitemap配置
    {
      ...sitemapEN,
      routes() {
        // 返回英文版网站的所有URL列表
        return [ '/',]
      },
    },
    // 中文sitemap配置
    {
      ...sitemapZH,
      routes() {
        // 返回中文版网站的所有URL列表
        return  [ '/',]
      },
    },
  ],

robots.txt 配置


User-agent: *
Allow: /
Sitemap: http://url地址/sitemap-en.xml
Sitemap: http://url地址/sitemap-zh.xml

在进行打包，通过谷歌工具 https://search.google.com/search-console/about 就可以被检索到，会被谷歌收录