Nuxt.js 页面渲染前获取浏览器语言

使用 Nuxt.js 提供的插件和中间件，可以在页面渲染前获取浏览器语言并设置页面语言，实现多语言网站。

1. 创建插件

创建一个名为 i18n.js 的插件文件，并在该文件中添加以下代码:

export default function ({ app }) {
  // 获取浏览器语言
  const language = window.navigator.language || window.navigator.userLanguage;
  // 设置默认语言为浏览器语言
  app.i18n.locale = language;
}

2. 引入插件

在 nuxt.config.js 中引入该插件，并设置 mode 为 client，因为获取浏览器语言只能在浏览器端执行:

export default {
  plugins: [
    { src: '~/plugins/i18n.js', mode: 'client' },
  ],
}

3. 使用中间件处理多语言路由

创建一个中间件文件来处理多语言路由，例如名为 i18n-middleware.js 的文件，并在该文件中添加以下代码:

export default function ({ app, route, redirect }) {
  // 获取当前语言
  const locale = app.i18n.locale || 'zh-CN';
  // 判断是否为多语言路由
  if (route.fullPath === '/') {
    // 如果没有语言前缀，重定向到默认语言首页
    return redirect(`/${locale}`);
  } else if (route.path.startsWith('/zh')) {
    // 如果语言前缀为中文，设置语言为中文
    app.i18n.locale = 'zh-CN';
  } else if (route.path.startsWith('/en')) {
    // 如果语言前缀为英文，设置语言为英文
    app.i18n.locale = 'en-US';
  }
}

该中间件会根据路由路径判断当前语言，并设置相应的语言环境。如果没有语言前缀，则重定向到默认语言的首页。

总结

通过插件和中间件，可以在 Nuxt.js 中轻松实现页面渲染前获取浏览器语言的功能，并根据语言设置页面语言，方便构建多语言网站。