废话不多说直接开整！！！
i18n国际化nuxt3配置：vue-i18n.intlify.dev/guide/integ... Nuxt I18n (@nuxtjs/i18n): i18n.nuxtjs.org/docs/gettin...
这是我得package.json 仅供参考
js
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"dev": "nuxt dev --dotenv .env.development",
"dev:development": "nuxi dev --dotenv .env.development",
"dev:production": "nuxi dev --dotenv .env.production",
"build": "nuxt build --dotenv .env.production",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@nuxt/image": "^1.7.0",
"@nuxtjs/i18n": "^8.3.1",
"@pinia-plugin-persistedstate/nuxt": "^1.2.0",
"@pinia/nuxt": "^0.5.1",
"element-plus": "^2.7.4",
"nuxt": "^3.11.2",
"pinia": "^2.1.7",
"vue": "^3.4.27",
"vue-router": "^4.3.2"
},
"devDependencies": {
"@element-plus/nuxt": "^1.0.9",
"sass": "^1.77.4",
"vue-i18n": "^9.13.1"
}
}安装 `
java
npm install vue-i18n -D
npx nuxi@latest module add i18n // 往nuxt.config.ts中添加 i18n，也可以手动添加创建自定义语言目录及设置方式
js
不用关心其他的配置，只要关心i18n的配置即可，都写出来是方便新手找位置
export default defineNuxtConfig({
devtools: { enabled: true },
ssr: true,
css: ['~/assets/css/global.scss', '~/assets/css/layout.scss', '~/assets/css/mixin.scss'],
modules: ['@nuxtjs/i18n', '@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt','@element-plus/nuxt', '@nuxt/image'], // 这里的@nuxtjs/i18n 一定要添加进来哦，要不然就没有自动动导入了
experimental: {
clientFallback: true,
},
plugins: ['~/plugins/http.ts', '~/plugins/api.ts', '~/plugins/burialPoint.ts'],
i18n: {
langDir: './locales/', // 设置的语言目录
defaultLocale: 'en', // 默认选择英文
locales: [ // 设置对应的语言文件列表
{ code: 'zh', iso: 'CN', file: 'zh.json' },
{ code: 'ko', iso: 'KR', file: 'ko.json' },
{ code: 'en', iso: 'GB', file: 'en.json' },
{ code: 'ja', iso: 'JP', file: 'ja.json' },
],
strategy: 'prefix_except_default',// 策略 默认就行
// detectBrowserLanguage: false,// 浏览器是否检测，不检测直接使用配置设置为false
detectBrowserLanguage: { // 配置后会读取浏览器策略，根据当当前所在国家自动选择语言
// 检测浏览器默认语言设置，强制跳转策略，有利于不同国家的seo优化
useCookie: true, // cookie持久化
cookieKey: 'i81n_redirected', //cookie的名字
alwaysRedirect: false, // 没有找到是否重定向
redirectOn: 'root', // recommended
},
},
runtimeConfig: {
// public对象中的属性，服务端和客户端都能获取到
public: {
apiUrl: process.env.NUXT_API_URL,
},
},
imports: {
dirs: [
// 扫描顶级模块
'composables',
'stores'
],
},
sourcemap: {
server: true,
client: true,
},
});剩下就是使用方式了，贼简单
js
<template>
// 我这是element-plus ui
<el-select
v-model="locale"
placeholder="Select"
size="small"
@change="setLocale" // 设置语言的方法,这是 i18n内置的方法
style="width: 120px">
<el-option // availableLocales 对应的是多语言的key值，他是个数组： [zh,ja,ko,en]
v-for="(locale, index) in availableLocales"
:key="index"
:label="t(`headers.settings.${locale}`)" // 这里是用模版的找到对应的字段参考locales文件中的相关字段
:value="locale" />
</el-select>
// 对应的模版渲染，请参考locales文件中的相关字段 $t是I18n提供的全局渲染模版的方法，{ name: '变量' } 可以传变量
<label for="locale-select">{{ $t('language') }}: </label>
<h1>{{ $t('title') }}</h1>
<h1>{{ $t('keywords') }}</h1>
<h1>{{ $t('description', { name: '变量' }) }}</h1>
<NuxtLinkLocale to="/about"> // 这里是跳转的路由不要用其他的哦
<el-button type="primary">跳转到 about</el-button>
</NuxtLinkLocale>
<NuxtLink :to="localePath('/about')">nuxtLink 跳转about</NuxtLink>// 使用NuxtLink 跳转方式
<SwitchLocalePathLink locale="en">Dutch</SwitchLocalePathLink> // 跳转直接切换成另一种语言
<NuxtLink :to="switchLocalePath('en')">Dutch</NuxtLink>
</template>
<script setup lang="ts">
const { setLocale, t, locale, availableLocales } = useI18n();
// 页面跳转的时候切记使用@nuxtjs/i18n提供的跳转方式，这样多语言切换才会被ssr渲染。浏览器会多一个语言路径
const localePath = useLocalePath()
const switchLocalePath = useSwitchLocalePath()
</script>