vue3使用i18n国际化

1. 在项目src目录创建i18n文件夹
2. 在scr中创建index.js

import { createI18n } from 'vue-i18n'
import ZH from './zh.js'
import EN from './en.js'
const messages = {
  zh: { ...ZH },
  en: { ...EN },
}

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: 'zh',
  messages,
})
export default i18n

3. 在src中创建zh.js

export default {
  person: {
    name: '张三',
    hobby: '唱跳，rap，篮球',
  },
}

4. 在src中创建en.js

export default {
  person: {
    name: 'zhangsan',
    hobby: 'Singing and dancing, rap, basketball',
  },
}

5. 在main.js中新增如下代码

import i18n from '@/i18n/index.js'
app.use(i18n)

6. 在控制修改语言的组件中添加如下代码

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const changeChinese = ()=>{
    locale.value = 'zh'
}
const changeEnglish = ()=>{
    locale.value = 'en'
}

7. 页面中使用时

 <span> {{ $t('person.name') }} </span>
 <span> {{ $t('person.hobby') }} </span>

8. 在组件script中使用

import { getCurrentInstance } from 'vue'
const { $t } = getCurrentInstance().proxy
console.log($t('person.name')) // => 获取值

9. 在js文件中使用

import i18n from "@/i18n/index.js"; 
i18n.global.t(to.meta.title)

10. 如果vue3的项目出现警告，请在vue.config.js中添加如下代码

chainWebpack: (config) => {
config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js')
},

vue3使用i18n 切换语言不更换问题

    // 使用计算属性将对象包裹起来就可以解决
    const columnConfig = computed(() => {
      return reactive([
        {
          type: 'normal',
          key: 'webName',
          prop: 'webName',
          label: $t('webAddress.WEB_NAME'),
        },
        {
          type: 'link',
          key: 'webAddress',
          prop: 'webAddress',
          label: $t('webAddress.WEB_ADDRESS'),
        },
        {
          type: 'image',
          key: 'webImage',
          prop: 'webImage',
          label: $t('webAddress.WEB_IMAGE'),
        },
        {
          type: 'normal',
          key: 'createTime',
          prop: 'createTime',
          label: $t('CREATE_TIME'),
          format: (row) => {
            return moment(row.createTime - 0).format('YYYY-MM-DD HH:mm:ss')
          },
        },
      ])
    })

注意：以上只是针对于vue3中使用i18n