vue3多语言插件 vue-i18n使用

mxlWhb

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

阅读量2.7k

点赞数

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

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

本文链接：https://blog.youkuaiyun.com/qq_42859450/article/details/126103422

版权

本文介绍了如何在Vue3项目中利用vue-i18n插件实现多语言功能。步骤包括下载vue-i18n，创建包含不同语言的文件，如zh.js和en.js，在main.js中引入并配置，最后在组件中使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
在这里插入图片描述
详细博客地址：https://blog.youkuaiyun.com/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引入