NuxtJS3配置国际化

猫在裙角jslms

已于 2024-02-04 15:51:13 修改

阅读量268

点赞数 1

分类专栏： NuxtJS3 文章标签： vue 前端

于 2024-02-04 15:50:11 首次发布

本文链接：https://blog.csdn.net/qq_34661750/article/details/136027340

版权

NuxtJS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在Nuxt.js项目中利用@nuxtjs/i18n实现国际化，包括设置lang文件、i18n.config.ts配置、nuxt.config.ts修改以及在Vue页面中使用国际化变量的方法。

摘要由CSDN通过智能技术生成

使用nuxtjs自带的@nuxtjs/i18n

官网： https://i18n.nuxtjs.org/getting-started/basic-usage

nuxtjs版本：

"devDependencies": {
    "@css-render/vue3-ssr": "^0.15.12",
    "@nuxtjs/i18n": "^8.0.0",
    "@vicons/ionicons5": "^0.12.0",
    "naive-ui": "^2.37.3",
    "nuxt": "^3.9.1",
    "nuxt-windicss": "^2.6.1",
    "vfonts": "^0.0.3",
    "vue": "^3.4.10",
    "vue-router": "^4.2.5"
  }

1.在项目根目录下创建lang文件夹

添加zh-cn.js

export default {
  common: {
    pleaseSelect: '请选择',
    pleaseEnter: '请输入',
    sure: '确定',
    cancel: '取消'
  }
 }

添加en.js

export default {
  common: {
    pleaseSelect: 'Please Select',
    pleaseEnter: 'Please Enter',
    sure: 'Sure',
    cancel: 'Cancel'
  }
 }

2.根目录添加i18.config.ts文件

import en from "./lang/en";
import zh from "./lang/zh-cn";

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'zh',
  messages: {
    en,
    zh
  }
}))

3.修改nuxt.config.ts

export default defineNuxtConfig({
  // ...
  modules: ['nuxt-windicss', '@nuxtjs/i18n', '@pinia/nuxt'],
  i18n: {
    vueI18n: './i18n.config.ts',
    locales: ['zh', 'en'],  // used in URL path prefix
    defaultLocale: 'zh',    // default locale of your project for Nuxt pages and routings
    detectBrowserLanguage: {
      useCookie: true
    }
  }
  // ...
})