vue中英文切换实例代码

前端  /  管理员 发布于 4年前   441

1、安装 vue-i18n依赖

yarn add vue-i18n 或者 npm install vue-i18n --save-dev

2、在src/components下新建文件夹language，并在文件夹language下新建zh.js及en.js

【src/components/language/zh.js】module.exports = {  language: {    name: 'English'  },  user: {    login:'登录',    register:'注册',    loginUsername:'请输入邮箱/手机号',  }}【src/components/language/en.js】module.exports = {  language: {    name: '中文'  },  user: {    login:'login',    register:'register',    loginUsername:'please input email or phone',  }}

3、在main.js下引入及注册vue-i18n

//中英文切换import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n=new VueI18n({  locale:localStorage.getItem('languageSet')||'zh',  //从localStorage里获取用户中英文选择，没有则默认中文  messages:{    'zh':require('./components/language/zh'),    'en':require('./components/language/en')  }})new Vue({  el: '#app',  router,  i18n,  //把 i18n 挂载到 vue 根实例上  components: {    App  },  render: h => h(App),})

4、使用