vue3多语言插件 vue-i18n使用

mxlWhb

已于 2022-08-02 10:37:22 修改

阅读量2.6k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-08-01 16:15:23 首次发布

本文链接：https://blog.csdn.net/qq_42859450/article/details/126103422

版权

vue 专栏收录该内容

88 篇文章 4 订阅

订阅专栏

效果图
在这里插入图片描述
详细博客地址：https://blog.csdn.net/qq_44376306/article/details/125949595
官方文档：vue-i18n官网文档
第一步：下载vue-i18n

npm install vue-i18n@next

第二步在src文件夹下创建I18n文件夹，文件夹下有三个文件，index.js,zh.js,en.js

//zh.js
export default{
	language:{
		name:"中文"
	}
}
//en.js
export default {
	language:{
	name:"chinese"
	}
}
//index.js
import {createI18n} from 'vue-i18n'
import zh from './zh'
import en from './en'
let i18n = new createI18n({
	local:"zh",//默认中文
	messages:{
      zh,en
   }
})
export default i18n

第三步 main.js引入

//main.js
import {createApp} from 'vue'
let app = createApp(App)
import  i18n from "@/I18n"
app.use(i18n )

第四步使用
//language.vue

<template>
    <el-card>
        <span>{{ $t('language.name') }}</span>
        <el-button @click="seleLanguage('zh')">中文</el-button>
        <el-button @click="seleLanguage('en')">英文</el-button>
    </el-card>

</template>
<script setup>
import i18n from "@/I18n";
function seleLanguage(indexValue) {
    i18n.global.locale = indexValue;
}
</script>