vue3项目搭建连载文章(5)-i18n国际化和ElementUI国际化

国际化配置

在vue3项目中，国际化主要分为两部分内容。 第一是数据的国际化。第二是组件的国际化。

i18n国际化配置

安装步骤

npm install vue-i18n@9
npm install vue-i18n@next

"dependencies": {
    "element-plus": "^2.2.32",
    "pinia": "^2.0.32",
    "pinia-plugin-persist": "^1.0.0",
    "vue": "^3.2.45",
    "vue-i18n": "^9.2.2", //这个是国际化后的配置
    "vue-router": "^4.1.6"
  },

在src下创建lang文件夹， 分别建立cn.ts, en.ts, index.ts。内容分别如下:

const messages = {
    home: {
      title: '书城',
      hint: '计算机科学和软件工程',
      guessYouLike: '猜你喜欢'
    }
  }
   
  export default messages

const messages = {
    home: {
      title: 'Book Store',
      hint: 'Computer Science And Software Engineering',
      guessYouLike: 'Guess You Like',
    }
  }
   
  export default messages

import { createI18n } from 'vue-i18n'
import en from './en'
import cn from './cn'
 
//引入的不同语言文件
const messages = {
  en, cn
}
 
//这个类型可以自己配置，毕竟每个人做的都不一样
const i18n:any =createI18n( {
  legacy: false,         // 使用 Composition API 模式，则需要将其设置为false
  globalInjection: true, //全局生效$t
  locale: 'cn',          // 默认cn翻译
  messages               //ES6解构
})
 
export default i18n;

main.js配置

import i18n  from './lang'  

createApp(App).use(store).use(i18n).use(router).use(ElementPlus,{ locale }).mount('#app')

页面使用

<template>
  <!-- //使用  $t -->
  <span> {{ $t("home.title") }} </span>
  <!-- //使用 t （要解构） -->
  <p>{{t("home.title")}}</p>
 
  <!-- //使用v-t , 这个数据是没有的，只是用来展示如何使用v-t -->
  <p v-t="{path:'title',args: {count: 10 }}"></p>
 
  <!-- //使用翻译组件
  // keypath:必传,和上面path参数一样   tag:可选，转为什么标签
  // ocale:可选，要用哪个语言环境    scope：可选，全局还是局部 `global` or `parent`
  //i18n:可选，优先级比scope高，参数也多，用的也不多，就不介绍了 -->
  <i18n-t keypath='home.title' tag="p" locale='en' scope="global"></i18n-t>
 
</template>
<script setup lang='ts'>
// 注意，这种引用会出现报错。# Must be called at the top of a `setup` function
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

//正确用法
import i18n  from '@/lang'  //这个是你自己的国际化配置文件
const { t } = i18n.global;
const timeUnits = ref([
    t('second.title')
])

 
</script>
<style lang='less' scoped></style>

ElementUI国际化配置

ElementUs默认值支持英文。 在前面的配置中，我们在main.ts中设置了全局支持中文

• main.ts配置

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'

createApp(App).use(store).use(i18n).use(router)
.use(ElementPlus,{locale}) //这段代码设置全局使用中文。导致其他页面的配置无效。 不能实现切换
.mount('#app')

• 在页面中如何配置中英的

<template>
  <el-date-picker
    v-model="value"
    locale="myLocale"
    type="daterange"
    start-placeholder="Start date"
    end-placeholder="End date"
    :default-time="defaultTime"
  />
</tamplate>
<script setup lang='ts'>
import { ref } from 'vue'
// import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import enUs from 'element-plus/lib/locale/lang/en';

myLocale: enUs //这个变量就是控制组件中英文的显示。
const value = ref('')
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
<script>

根据浏览器环境全局配置ElementPlus国际化和i18n问题

思考题: 如何根据浏览器的语言环境， 设置项目的中文或英文环境呢？

• 构建i18n配置文件并设置如下代码

import { createI18n } from 'vue-i18n'
import en from './en'
import cn from './cn'
import elementZhLocale from 'element-plus/lib/locale/lang/zh-cn';
import elementEnLocale from 'element-plus/lib/locale/lang/en';
import { getLocale,getDefaultLang } from '@/utils/tools'


//引入的不同语言文件
const messages = {
  en: {
    ...en,
    ...elementEnLocale
  },
  cn: {
    ...cn,
    ...elementZhLocale
  }
}

//默认语言先取自定义的，再取浏览器的，最后默认英文
const language = localStorage.getItem("locale") || navigator.language || 'en-US';
const myLocale = language == "zh-CN"? "cn": "en";
//这个类型可以自己配置，毕竟每个人做的都不一样
const i18n:any =createI18n({
  legacy: false,         // 使用 Composition API 模式，则需要将其设置为false
  globalInjection: true, //全局生效$t
  locale: myLocale,   
  messages               //ES6解构
})
 
export default i18n;

• main.ts配置

import elementZhLocale from 'element-plus/lib/locale/lang/zh-cn';
import elementEnLocale from 'element-plus/lib/locale/lang/en';
import { getLocale,getDefaultLang } from '@/utils/tools'

const app = createApp(App)
//ElementPlus如果是中文则设置中文环境。默认英文
const lang = getDefaultLang()
if(lang == "ch"){
   app.use(ElementPlus, {locale: elementZhLocale});
}else{
   app.use(ElementPlus, {locale: elementEnLocale})
}

• tools文件

import { NUMBER } from '@/constant/reg'

export const
  sortNum = (a:number, b:number) => {
    return a - b
  },
  isNumber = (str:string) => {
    return new RegExp(NUMBER).test(str)
  },
  getLocale = () => {
    const lang = localStorage.getItem('locale') || sessionStorage.getItem('locale') ||
      localStorage.getItem('lang') || sessionStorage.getItem('lang') ||
      localStorage.getItem('language') || sessionStorage.getItem('language') || navigator.language,
      index = lang.indexOf('-')
    return index <= 0 ? lang : lang.substring(0, index)
  },
  //得到默认使用的语言
  getDefaultLang = () => {
    //用户指定了默认语言时，使用用户指定的
    if (localStorage.getItem('lang') != null) {
        return localStorage.getItem('lang');
    } else {
        //用户未指定时，根据游览器选择:
        if (navigator.language == 'zh-CN') {
            return 'ch';
        } else if (navigator.language == 'en') {
            return 'en';
        } else {
            return 'en';
        }
    }
  }

• 使用效果 在chrome浏览器变换语言环境， 即可实现效果。