vue3.0 实现国际化标准语言，中英文切换，超级简单~

1.先安装

npm install vue-i18n

2.src下面新建一个 language 文件下面新建一个 index.js

import { createI18n } from 'vue-i18n'
export default createI18n({
    legacy: false, // 让 setup 函数可以通过 t 访问
    globalInjection: true, // 让 template 可以像 vue2 那样使用 $t 来访问
    locale: 'zh-cn' ,
    fallbackLocale: 'zh-cn',  //切换 zh-cn en-us 控制展示文字
    messages: {
        'zh-cn': {
            index: {
                title: '你好，vue-i18n'
            }
        },
        'en-us': {
            index: {
                title: 'Hello, Vue-i18n'
            }
        }
    }
})

 

 

3.在main.js 引入

import i18n from '@/language/'

createApp(App).use(i18n)

 

 4. 打开一个页面写入内容

<template>
  <div class="home" >
    <h2>访问方式1：{{ title }}</h2>
    <h2>访问方式2：{{ $t('index.title') }}</h2>
  </div>
</template>
<script>
import {useI18n} from 'vue-i18n'

export default {
  name: 'vueIndex',
  setup() {
    const {t} = useI18n()
    const title = t('index.title')
    return {
      title,
    }
  }
}
</script>