Vue3 实现中英切换（i18n）

最近在做一个官网，需要对显示进行中英切换。

以前只是知道做语言切换使用 i18n，不过一直没有上手用过。这次正好使用下试试。

当时做这个官网是想练手 Vue3 的，这里也是 Vue3 + i18n 的结合使用。

1、安装

npm install vue-i18n

2、创建语言文件和目录结构

　　a、在 src 下创建 locales 目录

　　b、在 locales 下创建语言配置文件：zh-cn.ts 和 en.ts

　　c、在 locales 下创建 index.ts 文件

对应目录结构如图：

这里因为只要中英切换，所以文件结构比较简单（语言多的会单独建个 language 文件夹存放语言配置文件）

3、编辑语言配置文件

这里做一个简单的配置

zh-cn.ts 的配置

export default {
  common:{
    more:'查看更多'
  },
  menus:{
    '/':'首页',
    Home:'首页',
    home:'首页',
    About:'关于',
    about:'关于',
    },
}

en.ts 对应的配置

export default {
  common:{
    more:'More'
  },
  menus:{
    '/':'home',
    Home:'Home',
    home:'home',
    About:'About',
    about:'about',
    },
}

4、在 vue 中注册

注册前要对语言文件整合以及 createI8n，这些在 locales/index.ts 中完成，代码如下

import { createI18n } from 'vue-i18n'

// element-plus 中的语言配置
import elementEnLocale from 'element-plus/lib/locale/lang/en'
import elementZhLocale from 'element-plus/lib/locale/lang/zh-cn'

// 自己的语言配置
import enLocale from './en'
import zhLocale from './zh-cn'

// 语言配置整合
const messages = {
  en:{
    ...enLocale,
    ...elementEnLocale
  },
  'zh-cn':{
    ...zhLocale,
    elementZhLocale
  }
}

// 创建 i18n
const i18n = createI18n({
  legacy: false,
  globalInjection:true,  // 全局模式，可以直接使用 $t
  locale: 'zh-cn',
  messages: messages
})

export default i18n

在 createI8n 时，globalInjection 的配置，关系到后面使用，这里注意下。.

接下来要在 main.ts 中注册

import { createApp } from 'vue'
import App from './App.vue'

import i18n from './locales/index'

const app = createApp(App)

async function setupApp() {
    app.use(i18n)
    app.mount('#app')
}

setupApp()

5、使用

准备工作都完成了，现在就是使用了。

　　a、在 html 中使用

// 配置了全局
<div>{{$t('menu.home')}}</div>


// 未配置全局
<div>{{t('menu.home')}}</div>

<script lang="ts" setup>
// 需要引入 t
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

　　b、ts 中使用

<script lang="ts" setup>

import i18n from '@/locales/index'

const t = i18n.global.t
const menuHome = { name: t('menus.home') }

</script>

 

到这里就可以正常使用了。

哎，怎么切换呢？下面就是中英切换的 HTML 和 js 代码

      <div class="right" @click="changeLanguage">
        <span :class="{'active':state.curLanguage === 'en'}">EN</span>&nbsp;&nbsp; —— &nbsp;&nbsp;<span :class="{'active':state.curLanguage === 'zh-cn'}">CN</span>
      </div>

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

const { locale } = useI18n()

const state = reactive({
  curLanguage: 'zh-cn',
})

const changeLanguage = () => {
  state.curLanguage = state.curLanguage === 'zh-cn' ? 'en' : 'zh-cn'
  locale.value = state.curLanguage
}

</script>