nuxt3 vuei18n 中的国际化解析

最新推荐文章于 2024-06-17 10:45:16 发布

XuCaiqin_

最新推荐文章于 2024-06-17 10:45:16 发布

阅读量158

点赞数

文章标签：开发语言 vue 前端

本文链接：https://blog.csdn.net/weixin_45978842/article/details/133785218

版权

使用版本

{
  "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"
  }
}

$t

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

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

<script setup>

</script>

$tm

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

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

<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>