【nuxt3国际化i18n】vue3+nuxt3+vite+TS国际化的正确做法

1、创建nuxt3请看Nuxt3官网

2、下面是添加i18n的叫教程，适用于企业前端项目。

添加依赖
依赖

yarn add vue-i18n 
yarn add @nuxtjs/i18n@next -D

配置文件nuxt.config.ts

//nuxt.config.ts
export default defineNuxtConfig({modules: ['@nuxtjs/i18n',],i18n: {strategy: 'no_prefix', // 添加路由前缀的方式locales: ["en","zh"], //配置语种defaultLocale: 'zh', // 默认语种vueI18n: './i18n/config.ts', // 通过vueI18n配置},})

i18n配置

import en from "assets/lang/en_us.json";
import zh from "assets/lang/zh_cn.json";
export default defineI18nConfig(() => ({legacy: false,  // 是否兼容之前fallbackLocale: 'en',  // 区配不到的语言就用enmessages: {en,zh}
}))

en_us.json

{"welcome": "hello","messages": "world!"
}

zh_cn.json

{"welcome": "你好","messages": "我的世界!"
}

使用

<script setup lang="ts">
import {onMounted} from "vue";const {locale, setLocale} = useI18n()
onMounted(() => {console.log("locale--language", locale.value)
})</script><template><div><v-btn @click="setLocale('en')">英文</v-btn><v-btn @click="setLocale('zh')">中文</v-btn><p>{{ $t('welcome') }}</p><p>{{ $t('messages') }}</p></div>
</template><style scoped></style>

---

感谢阅读，谢谢，加油。