标签：en nuxtjs json edge i18n zh NuxtI18n

[ PS ]

• 自写这篇文档的时候，这个模块还在开发当中，没有稳定的正式版本发布，但是开放了edge通道，经测试可以正常使用。
• 官方文档

[ 安装及配置准备 ]

1. 安装模块

     npx nuxi@latest module add i18n
   

2. 配置nuxt模块，nuxt.config.ts

     modules: [
       [
         '@nuxtjs/i18n',
         {
           vueI18n: './i18n.config.ts'
         }
       ]
     ]
   

   • 这时候你可能会发现，没有安装 @nuxtjs/i18n 这个依赖，切记目前不要去手动安装，因为在带有新功能的稳定正式版本发布之前，我们要通过 edge 通道来获取相关依赖，如果这时候手动去安装了，会在 package.lock.json中留下相关记录，待会儿还需要手动去处理修改，就很麻烦了。
3. 在项目根目录创建 i18n.config.ts 文件备用
4. 修改项目的 package.json 文件，添加 @nuxtjs/i18n 的 edge 通道，准备安装相关依赖

     {
       "devDependencies": {
         "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge"
       }
     }
   

5. 安装相关依赖

     npm i
   

6. 在根目录创建 lang 目录，并在里面添加语言配置文件 en.json 和 zh.json

     mkdir lang
     cd lang
     touch en.json zh.json
   

7. 分别在语言配置文件中添加配置内容

• zh.json

  {
    "主页": "主页",
    "关于我们": "关于我们",
    "帮助": "帮助"
  } 
  

• en.json

  {
    "主页": "Home",
    "关于我们": "AboutUs",
    "帮助": "Help"
  }
  

8. 配置 i18n.config.ts

     import en from './lang/en.json'
     import zh from './lang/zh.json'
     // 目前这个方法只有在 edge 通道中能正常使用，如果安装了 @nuxtjs/i18n的v版本，是会显示这个方法没有定义。
     // 这里的 edge 通道 和 edge 浏览器没有半毛钱关系。通过官方提供的这个通道，可以拿到目前开发状态中提供的最新状态版本。可以抢先使用一些方便的功能。等到开发测试完成正式发布就不用配置 edge 通道了。
     export default defineI18nConfig(()=> ({
       legacy: false,
       locale: 'zh', // 设置当前语言类型
       messages: { //设置语言配置
         en, zh
       }
     }))
   

• 到这里，安装和配置准备工作就完成了

[ 在模板中使用 ]

• app.vue

  <script setup>
  const {locale, setLocale} = useI18n()
  </script>
  <template>
  <h1>index page</h1>
  <button @click="setLocale('zh')">中文</button>
  <button @click="setLocale('en')">English</button>
  <p>{{ $t('主页') }}</p>
  </template>
  

标签：en,nuxtjs,json,edge,i18n,zh,NuxtI18n
From： https://www.cnblogs.com/anch/p/18365262