【nuxt3】第2期 | 如何在nuxt3中引入国际化实现语言切换？-烟雨网

theme: nico

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天点击查看活动详情

背景

本次的需求应用群体以海外客户为主，换言之就是国际化的需求，因此今天来探讨一下nuxt3的配套模块@nuxtjs/i18n的使用，顺便仿照官网简单实现一下切换语言组件！

收获清单

[x] 路由相关、element-plus按需引入
[x] nuxt3中i18n配置
[x] 切换语言组件

环境准备

安装插件之前，不得不说nuxt3文档很人性化，相关应用模块基本可以找到你开发需要的搭配模块及相关资源，我们今天的主角i18n从这里可以很快地搜到资源，要注意相应的版本，找到nuxt3对应的i18n文档传送门

`@nuxtjs/i18n`安装

pnpm add @nuxtjs/i18n@next --save

路由相关

用nuxt3开发的一个好处是几乎不需要配置路由，但是要遵循其规定的文件规范，如路由文件放在pages文件夹，页面文件放在layouts文件夹等，咱们的i18n切换需要搭配路由使用，于是采用pages方式，还有动态路由等的更多用法可以自行参考官网

element-plus按需引入

pnpm install element-plus 
pnpm install unplugin-element-plus -D
mkdir plugins
cd .\plugins\
new-item element-plus.client.ts

element-plus.client.ts代码

import { ID_INJECTION_KEY } from 'element-plus';

export default defineNuxtPlugin(nuxtApp => {

    nuxtApp.vueApp.provide(ID_INJECTION_KEY, {

        prefix: Math.floor(Math.random() * 10000),

        current: 0,

    })

})

nuxt.config.ts配置

import ElementPlus from 'unplugin-element-plus/vite'
export default defineNuxtConfig({
    css: ['element-plus/dist/index.css'],
    build: {
        transpile: ['element-plus/es'],
    },
    vite: {
        plugins: [
            ElementPlus()
        ],
    }
})

最后在使用页面引入需要组件即可~

i18n配置

i18n在nuxt.config.ts的参考配置如下

export default defineNuxtConfig(

    {
       ...,
        modules: ['@nuxtjs/i18n'],

        i18n: {
        // 语言路由路径策略
         strategy: 'prefix_except_default', 
         // 默认语言
         defaultLocale: 'en',
         // 语言包配置
         locales:[],
         // add `vueI18n` option to `@nuxtjs/i18n` module options    
            vueI18n:

            {

                legacy: false,

                locale: 'en',

                messages: {

                    en: { welcome: 'Welcome' }, fr: { welcome: 'Bienvenue' }

                }

            }

        }

    })

切换语言组件

先来看看咱们今天要实现的组件长啥样【传送门】，其实经过上面步骤的铺垫实现这个组件就很简单了，主要是利用@nuxtjs/i18n@next的switchLocalePath的方法切换语言，下拉菜单就可以用element-plus的组件，当然你也可以自己封装~

参考代码

<script setup>
const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()

const availableLocales = computed(() => {
  return (locales.value).filter(i => i.code !== locale.value)
})
</script>

<template>
 
  <NuxtLink v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)">{{
    locale.name
  }}</NuxtLink>
 
</template>