vue3引入i18n国际化

1.前言：

最近处理一个单体的项目，技术栈是vue3 + TS + vite + element-plus + pinia, 需要设置多语言，使用的是vue-i18n这一个国际化插件，整理如下：

1. ##安装依赖

npm install vue-i18n

2.配置

在src中在src文件夹下新添加文件夹，名为：language。在此文件夹下添加2个文件，其一为lang文件夹，里面存放'en.ts、zh.ts'2个文件（lang里面可以放各个不同的语言，该项目中只有中英文，需要配置其他的语言可按照这个例子添加文件）、其二为：index.ts`，目录结构如下：

三个文件代码如下：

index.ts文件

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

const i18n = createI18n({
  locale: localStorage.getItem('lang') || 'zh',
  fallbackLocale: 'zh',
  legacy: false,
  messages: {
    zh,
    en
  }
})

export default i18n

en.ts文件

// en.ts
export default {
  login: {
    login: 'login',
    userName: 'userName',
    password: 'password'
}
    
}

zh.ts文件

//zh.ts
export default {
  login: {
    login: '登录',
    userName: '用户名',
    password: '密码'
  }
}

3.引入

在项目的main.js中进行引入：

//main.ts
import i18n from './language/index.ts';
const app = createApp(App)
//此处只使用了国际化
app.use(i18n)    

4.使用

设置中英文切换

<!-- 切换中英文 使用select即可 -->
<el-select v-model="currentLanguage" @change="changeLanguage" class="m-2" placeholder="Select" size="small">
    <el-option
      v-for="item in languagesOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
 </el-select>
 
 <script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()

const languagesOptions = [
    {
        label: '中文',
        value: 'zh',
    },
    {
        label: 'English',
        value: 'en',
    },
]
const currentLanguage = computed(() => {
    return locale.value || localStorage.getItem('lang') || 'zh'
})
const changeLanguage = (val) => {
    locale.value = val
    // 切换语言后，存储到localStorage中
    // 避免跳转页面或者刷新当前页后，语言又变成默认的中文
    localStorage.setItem('lang', val)
}
 </script>

切换中英文效果如下

4.1 在模板中使用,即在template标签中使用

使用$t语法，示例如下：

js
<el-tab-pane label="Role" name="third"> {{ $t('login.login') }}</el-tab-pane>
<el-date-picker v-model="time" type="daterange" range-separator="~" :start-placeholder="$t(`time.startTime`)" />

4.2在js中使用

import { useI18n } from 'vue-i18n' 
const { t } = useI18n()
//使用computed监听，避免中英文切换后对应不成功
const timeFiveList = computed(() => {
return [{value: '1',label: t(`login.login`)}]
}),

5.Element-Plus组件库的国际化

使用Element-Plus的组件，可以用官方文档的属性去进行配置，但是每一个组件都需要配置，有一个更便捷的方法，对APP.vue进行配置

//App.vue
<script setup lang="ts">
import { computed, ref } from 'vue'
//获取element-plus国际化语言文件
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { useI18n } from "vue-i18n";
const { locale } = useI18n();

// loacl.value = localStorage.getItem('language') || 'zhCn'
// 修改element-plus国际化语言
// 使用omputed监听语言的变化，确定该给element使用中文包还是英文包
const currentLanguage = computed(() => {
  let lang = locale.value || localStorage.getItem('lang') || 'zh'
  if (lang === 'zh') {
    return zhCn
  }
  return en
})

</script>
<template>
  <el-config-provider :locale="currentLanguage">

    <router-view />

  </el-config-provider>
</template>

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

效果如下：