vue-i18n国际化

一前端vue的国际化：

1、安装依赖：@8是版本号

npm install vue-i18n@8

2,在main.js中修改以下内容：

import VueI18n from 'vue-i18n'
//通过 Vue.use() 明确地安装 vue-i18n： 
Vue.use(VueI18n)

//增加代码准备翻译的语言环境，及配置文件路径
const i18n = new VueI18n({
  locale:'zh_cn',
  messages:{
    'zh_cn':require('./locale/lang/zh_cn'),
    'ja':require('./locale/lang/ja'),
  }
})

//将 i18n 注入 vue 中
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

3,增加文件：

4、zh_cn.js文件和ja.js：

module.exports={
  login:{
    form:{
       title:{
         title:"XX系统",
         placeholder:"",
       },
       button:{
         text:"登 录"
       }

    }
  }


}

module.exports={
  login:{
    form:{
       title:{
         title:"education System",
         placeholder:"",
       },
       button:{
         text:"login"
       }

    }
  }


}

5、html页面引用:

 
{{$t('login.form.title.title')}}

  {{$t('login.form.button.text')}}


 //注意placeholder前有个:，否则会被当做字符串处理i18n的key。


//在vue.js data 中赋值
 

6、修改浏览器中的语言，火狐浏览器修改如下：

 7、刷新页面，测试效果