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>