il8n国际化

安装

npm install vue-i18n

npm install @nuxtjs/i18n

使用

在根目录下创建plugins和locales目录。

在plugins中创建i18n.ts，在locales创建对应的zh.js或zh .json文件；

//plugins/il8n.ts
// 多语言配置
import { createI18n } from 'vue-i18n'
import en from '@/locales/en.json';
import zh from '@/locales/zh.json';
import Cookies from 'js-cookie'
// 下面三个引入的对element-plus组件国际化操作
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import enCn from 'element-plus/dist/locale/en.mjs'

const message = { en, zh }

// 设置cookies
// Cookies.set('lang','zh')

const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: Cookies.get('lang')=='en'?'en':'zh',
    warnHtmlMessage: false,
    messages: message
})



export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(i18n);
    // elementplus组件国际化的引入
    nuxtApp.vueApp.use(ElementPlus,{locale: Cookies.get('lang')=='en'?enCn:zhCn,});
})

//locales/zh.json
{
    "textUser": "国际化中文"
}

//locales/en.json
{
    "textUser":"国际化英文"
}

页面配置

<template>
  <div>
    <!-- element-plus组件动态使用国际化需要添加这个操作来执行 -->
    <el-config-provider :locale="locales">
      <el-pagination :current-page="4" :page-size="100" :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-config-provider>
    <div>{{ $t("textUser") }}</div>
    <div>{{ title }}</div>
    <button @click="onEventClick()"> 更改状态 </button>
  </div>
</template>
 
<script setup lang="ts">
import { computed, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { useI18n } from "vue-i18n";
import Cookies from 'js-cookie'
// 不使用layout布局功能
definePageMeta({
  layout: false
})


const { t, locale } = useI18n();
const title = ref<string>(t("textUser"));

// element-plus组件国际化动态更新
const locales = computed(() => (language.value === 'zh-cn' ? zhCn : en))
const language = ref('zh-cn')


const onEventClick = () => {
  
  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'

  // 自定义国际化配置
  Cookies.set('lang', locale.value=='en'?'zh':'en');
  locale.value = locale.value=='en'?'zh':'en'
  title.value =locale.value=='en'?'当前语言更换成英文了':'当前语言更换成中文了'
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>
 
<style scoped></style>

在vue引入语言包的时候，引入的两个js会报错，这个时候在根目录新增config.d.ts,,,,config这个名字可以随便修改，比如uu.d.ts也可以,然后添加两个包的定义

config.d.ts

declare module'element-plus/dist/locale/zh-cn.mjs'
declare module'element-plus/dist/locale/en.mjs'

点击之前 点击事件，改变状态