nuxt3 vuei18n 中的国际化解析_nuxt3国际化

使用版本

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/i18n": "^8.0.0-rc.5",
    "nuxt": "^3.7.4",
    "sass": "^1.69.0",
    "vite-plugin-vuetify": "^1.0.2",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5",
    "vuetify": "^3.3.20"
  },
  "dependencies": {
    "@mdi/font": "^7.3.67",
    "@pinia/nuxt": "^0.4.11"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$t

$t可以进行基础的变量翻译

<template>
  <div class="app">
    <div class="title">
      {{ $t("login") }}
      {{ $t("logout") }}
    </div>
  </div>
</template>

<script setup>

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

$tm

$tm 进行对象或数组类型的翻译，同时需要配合 $rt 进行操作
contents是配置在language中的语言包

export default {
    language: [
        {
            name: '简体中文',
            code: 'zh',
        },
        {
            name: '英语',
            code: 'en',
        }
    ],
    login: '登录',
    logout: '退出',
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="container">
  <template v-for="content in tm('contents')">
    <h2>{{ rt(content.title) }}</h2>
    <p v-for="paragraph in content.paragraphs">
     {{ rt(paragraph) }}
    </p>
  </template>
</div>
<script setup>
import { defineComponent } from 'vue

//import { useI18n } from 'vue-i18n'
import {useI18n} from "#imports"


const {locale, locales} = useI18n();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17