在src下面新建两个文件夹，和对应的文件

language里面的语言包文件根据需求来创建

i18n下 index.js 文件

import { createI18n } from "vue-i18n";

import en from '@/language/en'

// import ja from '@/language/ja'

import zh_cn from '@/language/zh-cn'

// import zh_mo from '@/language/zh-mo'

const messages = {

  en: {

    ...en,

    // ...elementEnLocale

  },

  'zh-cn': {

    ...zh_cn,

    // ...elementZhLocale

  },

  // 'zh-mo': {

  //   ...zh_mo,

  //   // ...elementZhLocale

  // },

  // ja: {

  //   ...ja,

  //   // ...elementZhLocale

  // },

}

// 获取浏览器的语言，动态更改语言状态

export function getLanguage() {

  let languages = (navigator.language).toLowerCase();

  let languagesArray = languages.split("-");

  if (languagesArray[0] == 'zh') {

    if (languagesArray[1].toLowerCase() != 'cn') {

      languages = 'zh-mo'

    }

  }

  console.log('当前语言---', languages, languagesArray);

  const locales = Object.keys(messages)

  // console.log('locales', locales);

  for (const locale of locales) {

    // console.log(language.indexOf(locale));

    if (languages.indexOf(locale) > -1) {

      return locale

    }

  }

  return 'zh-cn'

}

const i18n = createI18n({

  legacy: false,

  locale: getLanguage(), //设置当前默认语言

  globalInjection: true,

  messages

})

//导出 i18n 实例。

export default i18n

language里面的语言包文件

在main.js中配置

// 导入i18n配置

import i18n from '@/i18n/index'

app.use(i18n)

使用

在template中使用

$t('DevicePage.L_TabBar_Home') }}

在js setup中使用

//导入

import { useI18n } from 'vue-i18n'
setup() {
    const { t } = useI18n() // 解构出t方法

    t('DevicePage.L_TabBar_Home') //使用
}

在js文件中使用

//导入

import i18n from "@/i18n/index"

//使用

const $i18n = i18n.global

$i18n.t('DevicePage.L_TabBar_Home')