基于 vue-i18n V9 国际化方案

安装 vue-i18n

npm install vue-i18n@next

使用步骤

新建 i18n 文件夹

1. 创建 messages 数据源
2. 创建 locale 语言变量
3. 初始化 i18n 实例
4. 注册 i18n 实例

// 数据源
const messages = {
  en: {
    msg: {
      test: "hello world"
    }
  },
  zh: {
    msg: {
      test: "你好世界"
    }
  }
}

// 语言变量
const locale = "zh"

// 初始化 i18n 实例
const i18n = createI18n({
  // 使用 composition API
  legacy: false,
  // 全局使用 t 函数
  globalInjection: true,
  locale,
  messages
})

export default i18n
----------------------------------------
// 注册 实例  注意要在 app之前
import i18n from '@/i18n'
app.use(i18n)

使用方法

更改locale 变量为 zh 则 变为中文

<template>
  <div class="">{{ $t("msg.test") }}</div>
</template>

更改locale 变量为 zh 则 变为中文 不作演示