vue-i18n实际用法

  1. 安装: pnpm add vue-i18n@next

  2. 创建language文件夹

  3. 在language下创建index.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { createI18n } from 'vue-i18n'

const modules: any = import.meta.glob('./modules/*.ts', { eager: true })

const messages: any = {}

Object.keys(modules).forEach((lang: any) => {
  const name = lang.split('/').pop().split('.')[0]
  messages[name] = modules[lang].default
})

const i18n = createI18n({
  locale: localStorage.getItem('guide-language') || 'cn',
  fallbackLocale: 'cn',
  messages,
  legacy: false,
  globalInjection: true,
})

export default i18n
  1. 在language文件夹下创建modules，并放入对应的语言ts文件，如
1
2
3
export default {
  test: '测试',
}
  1. 使用
1
2
3
import i18n from '@/language/index.ts'

app.use(i18n)
  1. 创建store文件，language.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export const useLanguageStore = defineStore('language', () => {
  const { locale } = useI18n()

  const language = useLocalStorage('guide-language', 'cn')

  const changeLanguage = (lang: string) => {
    language.value = lang
    locale.value = lang
  }

  return {
    language,
    changeLanguage,
  }
})
发布于