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

您可以在 Nuxt.js 的 nuxt.config.js 中配置 vue-i18n 插件来获取浏览器语言。以下是一个示例配置：

// nuxt.config.js

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

// plugins/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({ app, store }) => {
  // 如果在浏览器中，获取浏览器的语言
  if (process.client) {
    const browserLang = window.navigator.language.substring(0, 2)
    store.commit('SET_LANG', browserLang)
  }

  // 定义语言包
  const messages = {
    'en': require('~/locales/en.json'),
    'zh': require('~/locales/zh.json')
  }

  // 创建VueI18n实例
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages
  })
}

以上代码中，我们通过 window.navigator.language 获取浏览器语言，并将其存储到 Vuex 状态管理器中。在 VueI18n 实例中，我们使用了 store.state.locale 来动态设置语言。在每个组件中，您可以通过 this.$i18n.locale 来获取当前的语言。