vue3 设置国际化

安装 vue-i18n

 npm install vue-i18n@next

配置 i18n 项目文件

1、创建配置文件 /i18/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import routes from './router/index'
import lang from './lang/index'
Vue.use(
  VueI18n
)
const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: "ch", // 默认中文
  messages: lang
})
new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

2、i18n 引入 main.js

import { createApp } from 'vue'
import i18n from '@/i18n'

createApp(App).use(i18n).mount('#app')

3、页面使用 t 函数

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

4、触发事件，进行语言切换

<template>
  <div class="about">
    <h1>{{ $t('msg.test') }}</h1>
  </div>
  <button @click="changeLanguage('zh')">中文</button>
  <button @click="changeLanguage('en')">英文</button>
</template>
<script setup>
import { useI18n } from 'vue-i18n'

const i18n = useI18n()
const changeLanguage = (code) => {
  i18n.locale.value = code
}
</script>