nuxt3+vue3+vite+TS实现国际化

本文主要是介绍nuxt3+vue3+vite+TS实现国际化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

博主最近打算用Nuxt3重构了自己SSR博客，打算添加国际化功能，众所周知，实现国际化已是一个很常见的功能。用户可以根据自己的喜好，设置页面的自己合适的语言，从而实现国际化浏览。这样用户体验度会大大提升。博客用的nuxt3+vue3+vite+TS实现国际化，国际化用的vue-i18n，下面我给大家详细介绍。

一、安装依赖

#npm安装依赖
npm i vue-i18n 
npm i @nuxtjs/i18n@next -D#或者yarn安装
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配置

创建i18n文件件用来存放语种文件，以及语种的json翻译字典

config.ts配置

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

en_us.json

{"name": "chaoyang","messages": "how are you!"
}

zh_cn.json

{"name": "朝阳","messages": "你好吗!"
}

四、如何使用

<template><div><n-button tertiary type="primary" @click="setLocale('en')">英文</n-button><n-button tertiary type="primary" @click="setLocale('zh')">中文</n-button><p>{{ $t('name') }}</p><p>{{ $t('messages') }}</p></div>
</template><script lang="ts">
import { defineComponent } from 'vue'
import { NButton } from 'naive-ui'
export default defineComponent({setup () {const {locale, setLocale} = useI18n()return {locale,setLocale}}
})
</script>

效果展示