Nuxt 获取浏览器语言并设置全局变量

在 Nuxt.js 中，可以使用插件的方式获取浏览器语言。

在项目根目录下的 plugins 文件夹中，新建一个语言插件文件 lang.js。
在 lang.js 中，使用 navigator.language 获取当前浏览器的语言，然后将其设置为全局变量，方便在其他页面中使用。

export default ({ app }, inject) => {
  const defaultLanguage = 'en'; // 默认语言为英文
  const browserLanguage = navigator.language.substring(0, 2); // 获取浏览器语言

  // 如果浏览器支持该语言，则使用该语言，否则使用默认语言
  const language = ['en', 'zh'].includes(browserLanguage) ? browserLanguage : defaultLanguage;

  // 将语言设置为全局变量
  inject('lang', language);
}

在 nuxt.config.js 中，将该插件添加到插件列表中。

export default {
  // ...
  plugins: [
    { src: '~/plugins/lang.js' }
  ]
}

在需要使用语言的页面中，可以使用 $lang 来获取当前语言。

<template>
  <div>
    <p>当前语言：{{$lang}}</p>
  </div>
</template>

<script>
export default {
  // ...
  mounted() {
    console.log(this.$lang); // 输出当前语言
  }
}
</script>