vue国际化解决方案

安装 vue-i18n 插件

yarn add vue-i18n@next

创建 language 相关目录及文件

在 src 目录下创建 languages 目录，并在 languages 目录下创建以下文件：

cn.ts

const cn = {
  msg: '你好',
}

export default cn

• en.ts

const en = {
  msg: 'hello',
}

export default en

• index.ts

import cn from './cn'
import en from './en'

export default {
  cn,
  en,
}

• i18n.ts

import { createI18n } from 'vue-i18n'
import messages from './index'

const i18n = createI18n({
  locale: localStorage.lang || 'cn',
  messages,
})

export default i18n

在 main.ts 文件中引入并使用 i18n

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

createApp(App)
  .use(i18n)
  .mount('#app')

处理语言切换

<template>
  <a-menu @click="onChangeLanguage">
    <a-menu-item key="cn">
      <span role="img" aria-label="简体中文" style="margin-right: 8px;">🇨🇳</span>简体中文
    </a-menu-item>
    <a-menu-item key="en">
      <a>
        <span role="img" aria-label="English" style="margin-right: 8px;">🇺🇸</span>English
      </a>
    </a-menu-item>
  </a-menu>
</template>

<script lang="ts">
import { message } from 'ant-design-vue'
import { defineComponent, getCurrentInstance } from 'vue'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  setup() {
    const { t, locale } = useI18n()
    /**
     * 语言切换成功
     */
    const onLanguageSwitchSuccess = () => {
      message.success(t('header.languageSwitched'))
    }
    /**
     * 切换语言
     */
    const onChangeLanguage = (e: any) => {
      const language = e.key
      locale.value = language
      localStorage.setItem('lang', language)
      onLanguageSwitchSuccess()
    }
    return {
      onChangeLanguage,
      onLanguageSwitchSuccess,
    }
  },
});
</script>

使用语言包的值

{{ $t('msg') }}

本文地址：https://www.tides.cn/p_vue-i18n