首页 > 其他 > 详细

vue实现国际化(i18n)

时间:2021-03-31 14:14:23      阅读:28      评论:0      收藏:0      [点我收藏+]

此篇文章主要是针对在vue中通过vue-i18n实现国际化

1.安装

npm

npm install --save vue-i18n

yarn

yarn add vue-i18n

2.在项目中创建一个lang文件夹
技术分享图片

3.在en.js和zh.js分别写入对应的字段,例子如下:
en.js

export default {
  message:{
    homePage:‘Home Page‘
  }
}

zh.js

export default {
  message:{
    homePage:‘首页‘
  }
}

index.js

import Vue from ‘vue‘
import VueI18n from ‘vue-i18n‘
import zhLocale from ‘./zh‘
import enLocale from ‘./en‘

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: ‘zh‘, //默认显示语言
  messages: {
    zh: {
      ...zhLocale,
    },
    en: {
      ...enLocale,
    }
  }
})

export default i18n

4.main.js中引入
技术分享图片

5.使用

<template>
  <div>
    <span>{{$t(‘message.homePage‘)}}</span>
    <button @click="changeLang">切换</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLang() {
      let lang = this.$i18n.locale
      this.$i18n.locale = lang == ‘zh‘ ? ‘en‘ : ‘zh‘
    }
  }
}
</script>

<style>
</style>

vue实现国际化(i18n)

原文:https://www.cnblogs.com/AdolphWilliam/p/14600697.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!