如何让一个vue项目支持多语言(vue-i18n)

多语言 同时被 3 个专栏收录
2 篇文章 0 订阅
1 篇文章 0 订阅

如何让一个vue项目支持多语言(vue-i18n)

1.安装:npm install vue-i18n --save
2.在main.js中引入vue-i18n

import VueI18n from 'vue-i18n'
Vue.use(VueI18n) 

创建中英文配置项文件

1.在public目录下新建lang文件夹及 zh.js和en.js等语言文件
在这里插入图片描述
2.文件格式 en.js zh.js
en.js

const en = {
	home: {
		"deng_lu": "Sign in",
		"zhu_ce": "Register"
	}
}

zh.js

const zh = {
 	 home: {
		"deng_lu": "登录",
  		"zhu_ce": "注册"
 	}
}

在根目录index.html引入en.js和zh.js

在这里插入图片描述

main.js写入一下代码

const lang_zh = zh	//获取默认中文
const lang_en = en	//获取默认英文
const messages = {
	en: lang_en,
	zh: lang_zh
}
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

new Vue({
  i18n,
  store,
  router,
  render: h => h(App)
}).$mount('#app')

在这里插入图片描述

最后在页面中使用

1.在html中

{{$t("home.geng_duo")}}

在这里插入图片描述
2.在js中使用

this.$t("home.deng_lu")

在这里插入图片描述

最后说明一下为什么要把语言文件放在public目录下,是因为这样在你打包项目后依然可以修改语言文件的配置,这样修改就不需要重新打包了

这里补充一点

语言包切换后,当重新进入页面又会回到默认的语言,所以我们要记住我们使用过的语言,这里就用到了本地缓存,废话不多说,直接上代码
如果对本地缓存不理解的,请自行查阅资料

let langCode = localStorage.getItem('lang_code');
//console.log(langCode)
if (langCode) { //如果本地没有缓存语言
	this.$i18n.locale = langCode
} else {
	localStorage.setItem('lang_code', res.data.result.config_list.lang_code);
	langCode = localStorage.getItem('lang_code');
	this.$i18n.locale = langCode
}

在这里插入图片描述
更为简单的方法,请阅读我上一篇

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值