如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包 并且修改后不需要重新打包

多语言 同时被 2 个专栏收录
2 篇文章 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目录下新建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目录下,是因为这样在你打包项目后依然可以修改语言文件的配置,这样修改就不需要重新打包了

如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包 并且修改后不需要重新打包,已更新
史上最短数组去重,最短数组最大值,最小值

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

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

抵扣说明:

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

余额充值