vue国际化 i18n

当项目中需要加入国际化的语言切换功能时，可以使用vue-i18n来实现。

首先，要在自己的项目里安装vue-i18n

npm install vue-i8n

之后，需要在main.js文件里引入一下，

import i18n from '自己新建一个存放转译的文件夹'
Vue.use(i18n: (key, value) => i18n.t(key, value) })
new Vue({
  i18n,
  render: (h) => h(App)
}).$mount('#app')

之后，在上述中**‘自己新建一个存放转译的文件夹’**加入自己需要转译的语言包

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from './lang/en' //自己的目录
import zhLocale from './lang/zh-CN'

/将数据配置好
const messages = {
    en: Object.assign(en, enLocale),
    zh: Object.assign(zh, zhLocale)
}
const i18n = new VueI18n({
    locale: localStorage.lang || 'tw',
    messages, 
})

export default i18n

在vue里面通过模板编译

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

参考链接：

https://juejin.cn/post/7026143594696146981

https://blog.****.net/luofei_create/article/details/124330219

https://blog.****.net/qq_39290323/article/details/125783050

https://blog.****.net/zhuxiandan/article/details/82220412

https://blog.****.net/gongwei_/article/details/111480347

https://blog.51cto.com/u_16802720/12663872

若想了解更多关于 vue-i18n 的使用，请前往 vue-i18n 官网

vue国际化 i18n

vue国际化 i18n

相关文章