安装

npm install vue-i18n

// index.ts
import { createI18n } from 'vue-i18n'
// 语言包
import ch from './ch'
import en from './en'

const lang = localStorage.getItem('localeLangD') || 'ch'
if (!localStorage.getItem('localeLangD')) {
  localStorage.setItem('localeLangD', lang)
}

const i18n = createI18n({
  legacy: false, // 设置为 false，启用 composition API 模式
  locale: en,
  messages: {
    ch,
    en
  }
})
export default i18n

// 中文语言包
export default {
  tips: {
    placeholder: '通过文件名、正文、创建者搜索文档',
    switchLange: '点击切换语言'
  },
  button: {
    ch: '中文',
    en: '英文',
    fileName: '文件名',
    fileContent: '正文',
    fileType: '类型'
  }
}

main.js引入

import i18n from '@/lang/index'

.use(i18n)

切换语言的方法：

    const switchLangFn = (value: string) => {
      console.log(value)
      if (value === 'ch') {
        localStorage.setItem('localeLangD', 'ch')
      } else if (value === 'en') {
        localStorage.setItem('localeLangD', 'en')
      }
      location.reload()
    }

HTML中使用

{{ $t('tips.switchLange') }}

外部 js 文件使用：

import i18n from "@/lang/index";

const tips = i18n.global.t('tips.switchLange')