非常简单!!!nuxt2 配置 @nuxt/i18n

317 阅读1分钟

安装

网上找了很多教程,很少配置@nuxt/i18n,不然就是不能用

nuxt2 对应 vue2 版本,安装@nuxt/i18n 要安装V7 版本

@nuxt/i18n V7 官网

npm install @nuxt/i18n@7.0.0

配置

配置翻译文件

创建 locales 文件夹 还有对应的json文件

en-Us.json

image.png

配置nuxt.config.js

 modules: ["@nuxtjs/i18n"],
 i18n: {
    locales: [
      { code"en", iso: "en-US", file: "en-US.json" },
      { code"zh", iso: "zh-CN", file: "zh-CN.json" },
    ],
    lazy: true, //懒加载文件
    langDir: "locales/",
    defaultLocale: "en",
},

使用

官网 @nuxt/i18n V7 官网

//切换语言 template 中使用
<nuxt-link :to="switchLocalePath('en')">English</nuxt-link>

//script 中使用
this.$i18n.setLocale("zh");

//跳转路由 不用像vue-i18n那样去配置路由 直接使用
//翻译使用$t()
<nuxt-link :to="localePath('/app/profile')">Route by path to: {{ $t('Profile') }}</nuxt-link>

请提供您想要检查的内容或文本,我将帮助您指出其中的错误。 当然可以!请您提供具体的内容或问题,我会尽力帮助您指出错误并提供改正建议。

以上就是nuxt2 配置 @nuxt/i18n

主要是简单使用,其他使用请参考官网

有错误请指出

20220131161852_46d55.jpg