i18n的使用

1.i18n的官网地址：Vue I18n | Vue I18n

2.i18n的安装

        npm install --save vue-i18n@next

3.i18n的配置

        1.创建一个i18n.js.

进行如下配置

import { createI18n } from "vue-i18n" //导入i8n
import zh from "./lang/zh" //导入中文配置
import en from './lang/en' //导入英文配置

const messages = {
    zh,
    en
}
const i18n = createI18n({ //创建i18n
    legacy:false,
    locale:localStorage.getItem("lang"),
    globalInjection:true,
    messages
})
export default i18n //导出i18n

2.zh.js以及en.js的书写格式（也可以直接在messages中书写，这样是为了方便管理）

//zh.js的书写格式，en与其一一对应
export default{
    message:{
        navs:"当前"
    }
}

3.在main.js中导入以及使用

import { createApp } from 'vue'
import Vuei18n from "./locales/i18n.js"

const app=createApp(App)

app.use(Vuei18n)

app.mount('#app')

4.应用

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

5.实现点击切换

//创建切换按钮
<div class="lang">
   <el-dropdown>
       <span class="el-dropdown-link">
           语言切换
            <el-icon class="el-icon--right">
                <arrow-down />
             </el-icon>        
        </span>
        <template #dropdown>
           <el-dropdown-menu>
               <el-dropdown-item @click="changeLang('zh')">中文</el-dropdown-item>
               <el-dropdown-item @click="changeLang('en')">英文</el-dropdown-item>
           </el-dropdown-menu>
        </template>                   
                   
    </el-dropdown>
</div>

<script>
    //切换语言
    const changeLang = (lang) =>{
        localStorage.setItem("lang",lang)
        //刷新ui
        location.reload();
    }

</script>