Vue3——国际化多语言集成

1. 安装vue-i18n

cnpm i -S vue-i18n@next

2. 新建en-US.ts 、zh-CN.ts

3. 新建index.ts

import { createI18n  } from "vue-i18n";
import en from './lang/en-US'
import zh from './lang/zh-CN'
 
const defaultLocale = "zh-CN"
 
const i18n = createI18n({
  legacy: false,
  locale: defaultLocale,// 默认语言
  fallbackLocale: 'en-US',
  messages: {
    'en-US': en,
    'zh-CN': zh
  },
})

export default i18n

4. main引入index.ts

5. 页面使用

<template>
  <div>
    <div>{{ $t("C_1") }}</div>
    <button @click="handleChange('en-US')">切换语言</button>
  </div>
</template>

<script lang=ts>
import { defineComponent } from "vue";
import {useI18n} from "vue-i18n"

export default defineComponent({
  setup() {
    const {locale} = useI18n()

    /* 切换语言 */
    function handleChange(lang) {
      locale.value = lang
    }

    return { handleChange };
  },
});
</script>