Nuxt3+vue-i18n国际化（巨坑！！

原创

KID.

发布于 2023-11-02 16:02:25

2.9K5

发布于 2023-11-02 16:02:25

文章被收录于专栏：Coooooooooode！（前端）

`@nuxtjs/i18n@next`

Nuxt3 据说是提供了一个@nuxtjs/i18n@nextnuxtjs/i18n官网。官方文档有提供引入和使用方法。

亲测无效 不知道是不是我nuxt3 3.8版本的原因，在nuxt.config.ts中配置vueI18n会提示输入内容错误，因为输入的是对象，但是检测需要我传一个地址。报错。

改成地址传入，可运行但是无法匹配对应文字。

nuxt3提供的i18n使用方法也是没什么用。

也是第一次遇到官网示例没用的情况。所以放弃了 nuxt/i18n

如果有打开在使用@nuxtjs/i18n@next 没有问题麻烦指导一二

vue-i18n

vue-i18n github示例github示例中的代码可以完美应用。

安装依赖

安装@intlify/unplugin-vue-i18n 和 vue-i18n两个依赖

npm i @intlify/unplugin-vue-i18n vue-i18n

配置`nuxt.config.ts`

import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nVitePlugin from '@intlify/unplugin-vue-i18n/vite'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  build: {
  transpile: [/vue-i18n/]
},
  vite: {
    resolve: {
      alias: {
        'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
      }
    },
    plugins: [
      VueI18nVitePlugin({
        include: [
          resolve(dirname(fileURLToPath(import.meta.url)), './locales/*.json')
        ]
      })
    ]
  }
})

plugins中将i18n在vue中使用

配置好后在plugins目录下创建i18n.ts文件。因为需要在plugins中将i18n挂到vue上

|- plugins
    |-- i18n.ts
|- i18n
    |-- zh.ts
    |-- en.ts

zh.ts en.ts 配置国际化匹配的内容

export default {
  home: '主页',
}

i18n.ts

import { createI18n } from 'vue-i18n'
import en from '../i18n/en'
import zh from '../i18n/zh'

export default defineNuxtPlugin(({ vueApp }) => {
    // 这里设置了默认启动时从cookie获取语言配置。至于为什么是cookie ，是因为nuxt 的首屏服务端加载原因
  const language = useCookie('lang').value || 'en'
  const i18n = createI18n({
    fallbackLocale: 'zh',
    locale: language,
    messages: {
      zh,
      en
    }
  })

  vueApp.use(i18n)
})

切换语言组件

<template>
  <div>
    <select v-model="$i18n.locale" @change="handleChange">
      <option value="zh">中文</option>
      <option value="en">English</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
const handleChange = () => {
  const cookieLang = useCookie('lang')
  cookieLang.value = locale.value
}
</script>

<style lang="scss" scoped></style>

页面使用

<template>
  <div>
        <NuxtLink to="/home" active-class="active">
          {{ $t('home') }}
        </NuxtLink>
  </div>
</template>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度