vue项目使用vue-i18n国际化

1、安装：

npm install vue-i18n

2、在main.js中引用并使用：

import VueI18n from "vue-i18n"
Vue.use( VueI18n)
//引入element-ui语言
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
const   messages={
    
  en:{
    ... require('@/assets/languages/en.json'),
     ...elementEnLocale

  },
  cn:{
    ... require('@/assets/languages/zh.json'),
    ...elementZhLocale

  }
 
}
const i18n = new VueI18n({
  locale: localStorage.getItem("langData") || 'en',//指定默认语言
  messages,
})
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  el: '#app',
  router,
  i18n,
  stores,
  components: {
    App
  },
  template: '<App/>'
})

3.创建语言包文件：

创建语言包文件，在src下建languages文件夹并建en.json和zh.json文件

• en.json文件

{
  "common": {
    "home": "Home",
    "login": "Login",
    "register": "Register",
    "appDownload": "APP Download",
   

  },
  "home": {
    "hint1": "Please Input Nickname",
    "hint2": "Please Input Username",
    "hint3": "Please Input Password",
  

  }
}

• zh.json文件

{
  "common": {
    "home": "首页",
    "login": "登录",
    "register": "注册",
    "appDownload": "APP 下载",
   
  
  },
  "home": {
    "hint1": "请输入昵称",
    "hint2": "请输入用户名",
    "hint3": "请输入密码",
    
  
  }
}

4.点击按钮更换语言：

1.通过localStorage设置 localStorage.setItem('lang',langData)在main.js中获取

lang1.png

5. 在template中使用vue-i18n

 <p class="text">{{$t("home.overallBalance")}}</p>
<el-form-item :label="$t('home.LimitedInfor')"></el-form-item>

6. 在js中使用vue-i18n

data()
return {
 list:[this.$t('home.day'), this.$t('home.month'), this.$t('home.year')]
}

• 有写的不足的地方欢迎吐槽！！！！！！！！！