vue3中多语言切换vue-i18n@next

1.下载i81n插件

npm install vue-i18n@next 或者 yarn add vue-i18n@next

2.在src在创建language文件夹，并创建js/ts文件

3.在js/ts中写入对应的语言信息

4.创建index.js/index.ts文件，导出所有信息

5.在language下创建i18n.js/i18n.ts文件(名字随意取)（注意：messages不要写错）

6.在main.js/main.ts中注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import registerI18n from './language/register-i18n'

const app = createApp(App)
app.use(router)
app.use(store)
app.use(registerI18n)
app.mount('#app')

7.在template中使用

<template>
    <div>
    	{{$t('message.string_lang')}}
    </div>
</template>

8.在setup中使用和语言切换

<template>
    <div>
    	{{$t(lang)}}
        <span @click="changeLang">语言切换</span>
    </div>
</template>
<script lang="ts">//如果用js的兄弟就删除lang="ts"
    import { defineComponent, ref, reactive } from 'vue'
	import { useI18n } from 'vue-i18n'
	export default defineComponent({
        setup(){
             //下面这行代码要写在所有代码前面
        	 const { locale, t } = useI18n()
         	 //在setup中使用
        	 console.log(t('message.string_lang'))
            
            //如果在ref / reactive中使用
            //最好这样使用
            let lang = ref('message.string_lang')
            //let lang = ref(t('message.string_lang')) 这种方式目前我测试  在语言切换后页面上达不到响应式
            
            //语言切换
            const changeLang = ()=>{
                //切换语言 值要对应上面index中导出的名字  要一致  第四步
                locale.value = "cn"
                //缓存到localStorage中下次进来还是切换后的语言  如果不需要可以删除下面代码
    			localStorage.setItem('lang', "cn")
            }

            return {
                lang,
                changeLang
            }
        }
    })
<script>