nuxt3+Vue3 i18n 项目以及插件快速无脑配置方法

本文主要讲述配置方法  不是语言切换等等  如有需要可以联系我加更

1.下载 @nuxtjs/i18n 依赖.  注意不是 vue-i18n！！！！

yarn add @nuxtjs/i18n

npm i @nuxtjs/i18n

2.在nuxt.config文件配置

modules: ['@nuxtjs/i18n'],
i18n: {
    strategy: 'no_prefix', 
    // no_prefix（默认） 不加前缀  (如果使用其他选项  将会在浏览器地址前加上语言前缀  如  /en/你的地址)
    // prefix_except_default  这种策略只有在非默认语言时，才会在 URL 中添加语言前缀。默认语言不会有语言前缀。
    // prefix  这种策略会在所有语言的 URL 中都添加语言前缀，无论是不是默认语言。
    locales: [
      {
        name_cn: '中文',// 中文名
        iso: '简体中文',
        name: '简体中文', // 语言
        code: 'zh-cn',  // 唯一Code 可以不写
        file: 'zh-cn.json' // 文件路径 json文件
      },
      { name_cn: '英文', // 中文名
        iso: 'English', 
        name: 'English', // 语言
        code: 'en', // 唯一Code 可以不写
        file: 'en.json' // 文件路径 json文件
        }   
    ],
    lazy: true, // 是否使用懒加载，即是否在需要的时候才加载翻译文件
    langDir: 'locales/', // 存储语言翻译信息的目录
    defaultLocale: 'zh-cn' // 默认语言
  }

当然  如果想配置更多选项  你也可以在i18n配置里面写入

i18n:{
 vueI18n: './i18n.config.ts'
}

3. i18n.config.ts文件（如果是一般项目没有特殊需求  可以不需要）

在这个文件配置效果等效于在nuxt.config文件i18n  只不过配置属性名称可能不同

可以进行更多配置

import enLocale from '~/locales/en'
import zhCnLocale from '~/locales/zh-cn'
export default defineI18nConfig(() => ({
  locale: 'en',
  messages: {
    'zh-cn': zhCnLocale,
    en:enLocale
  }
}))

4.locales文件

5.vsCode插件配置 （可选）非常推荐

配置：setting.json(.vscode文件)

{
    "i18n-ally.localesPaths": ["locales"], // 告诉插件在哪里查找多语言文件
    "i18n-ally.keystyle": "nested",//  表示键值对是以嵌套的结构组织的。
    "i18n-ally.displayLanguage": "zh-cn",// 在文件中显示简体中文（zh-cn）的翻译
    "i18n-ally.sourceLanguage": "zh-cn", // 项目源语言
    "i18n-ally.theme.annotation": "rgba(153, 153, 153, .8)", // 注释的颜色
    "i18n-ally.theme.annotationBorder": "rgba(153, 153, 153, .8)",//注释的边框颜色
    "i18n-ally.theme.annotationMissing": "#d37070",// 缺失翻译的注释颜色  
    "i18n-ally.theme.annotationMissingBorder": "#d37070" //缺失翻译注释的边框颜色
  }
  

插件名：i18n Ally 

效果：

插件名：Vue i18n 

效果：可以帮你加双引号并且根据语言文件，快速推荐可能的选项 

希望可以帮助到你