Nuxt3 国际化配置

官方文档：官网链接

安装

yarn add --dev @nuxtjs/i18n@next

nuxt.config.ts 配置

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    'nav-default-layout',
    '@pinia/nuxt',
    '@vueuse/nuxt',
    '@nuxtjs/i18n',
  ],
  i18n: {
    vueI18n: './i18n.config.ts', // custom path example
  },
  runtimeConfig: {
    public: {
      langKey: 'vi'
    }
  }
})

i18n.config.ts 配置

import en_lang from './assets/lang/en.json'
import zh_lang from './assets/lang/zh.json'
import vi_lang from './assets/lang/vi.json'

const en = JSON.parse(JSON.stringify(en_lang))
const zh = JSON.parse(JSON.stringify(zh_lang))
const vi = JSON.parse(JSON.stringify(vi_lang))

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'zh',
  messages: {
    zh,
    en,
    vi,
  },
}))

assets文件夹

app.vue

<script setup lang="ts">
// 读取环境变量中的langKey
const { langKey } = useEnvVariable()
const { locale } = useI18n()

// 设置多语言的key
locale.value = langKey.value
</script>

页面级别的使用

<template>
  <!-- 直接使用 -->
  <a
    class="ugc-tab-text"
    href="/t"
  >
    {{ $t('newArticle') }}
  </a>
  <!-- 传值使用 -->
  <ViewsCommonModuleHeader :title="$t('hotArticle')">
    <template #icon>
      <ArticleSvg />
    </template>
  </ViewsCommonModuleHeader>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
  
// script中常量的使用
const tabs = [
  { name: t('dayRank'), id: 'day', status: true },
  { name: t('weekRank'), id: 'week', status: true },
  { name: t('mouthRank'), id: 'month', status: true },
]
  
</script>

总体思路: 因为是会部署到不同的域名下，不需要做多语言的切换，所以将多语言的key设置成环境变量,部署的时候在Portainer设置不同的key即可。