【Nuxt3.x结合i18n国际化】基础使用

---

Nuxt3.x结合i18n国际化

Nuxt3 模块使得i18n更容易与框架结合。

nuxt/i18n文档 Nuxt3选择i18n的v8版本

一、安装

npm/yarn/pnpm

npm install @nuxtjs/i18n@next --save-dev
yarn add --dev @nuxtjs/i18n@next
pnpm add @nuxtjs/i18n@next --save-dev

二、nuxt.config.ts 中引入模块并配置

// 方式一
export default defineNuxtConfig({
   
	modules:[...,
	 '@nuxtjs/i18n',
	 ...]
	 i18n:{
   
	   /*具体配置*/
	 }
})
// 方式二
export default defineNuxtConfig({
   
	modules:[...,
	 [
	  '@nuxtjs/i18n',
	   {
   /*具体配置*/}
	 ]
	 ...]
})

案例配置演示

说明：i18n配置中核心翻译配置来源与vueI18n的配置，这里导入同级目录下建立的i18n.config.ts文件

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

i18n.config.ts

import en from './lang/en.json'
import zh from './lang/zh.json'
import ja from './lang/ja.json'

export default defineI18nConfig(() => ({
   
    legacy: false,  // 是否兼容之前
    fallbackLocale: 'en',  // 区配不到的语言就用en
    messages: {
   
        en: en,
        zh: zh,
        ja: ja,
    }
}))

json文件如下，例如：en.json

{
   
    "home": "Home",
    "test": "Test",
    "about": "About"
}

三、案例测试

1.页面样式

代码

简单安装个elementPlus
yarn add element-plus @element-plus/nuxt -D

一般语言切换都在头部吧，来个头部layouts布局

layouts/default.vue

<template>
    <Header></Header>
    <slot></slot>
</template>

创建components/Header/header.vue