Vue项目如何实现国际化？前端框架vue实现项目国际化(i18n)

网上有很多实现国际化的方式,国际惯例先写流程再写感想及遇到的问题

1.安装

npm install vue-i18n

2.在main.js也就是全局引入i18n

//引用i18n
import VueI18n from 'vue-i18n';
Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件
const i18n = new VueI18n({
locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
messages:{
 'zh': Object.assign(require('./VueI18n/language-zh.json'), require('./VueI18n/demo-zh.json')),
 'en': Object.assign(require('./VueI18n/language-en.json'), require('./VueI18n/demo-en.json'))
}
});
//在vue插入i18n
var vue = new Vue({
el: '#app',
router,
store,
i18n,
components: { App },
template: '<App/>'
})

很简单吧😂

3.在src文件下新建对应的文件夹

4.强调一下json文件的格式

//demo-en.json
{
"forgetPwd":{
  "Getcaptcha":"Get captcha",
  "ChangePassword":"Change Password",
  "phonenumber":"phone number",
  "VerificationCode":"Verification Code",
  "Sendverificationcode":"Send verification code",
  "nextstep":"next step",
  "return":"return",
  "Newpassword":"New password",
  "Confirmnewpassword":"Confirm new password",
  "determine":"determine"
}
}
//demo-zh.json
{
"forgetPwd":{
  "Getcaptcha":"获取验证码",
  "ChangePassword":"修改密码",
  "phonenumber":"手机号码",
  "VerificationCode":"验证码",
  "Sendverificationcode":"发送验证码",
  "nextstep":"下一步",
  "return":"返回",
  "Newpassword":"新密码",
  "Confirmnewpassword":"确认新密码",
  "determine":"确定"
}
}

5.页面引用i18n的方式

<span>{{$t('footer.TianjinICPRecordNo')}}：XXXXXXXX</span>
 <span>{{$t('footer.copyright')}}：XXXXXXXXXX</span>

6.中英文切换

//可以在data中获取此时的中英文状态,我绑定时的字段是lanVal
lanVal:this.$i18n.locale,
//在方法中调用的规则
//把this.$i18n.locale 赋值;
//如果切换成英文
this.$i18n.locale = en;
//如果切换成中文
this.$i18n.locale = zh;

为什么是zh或en两个字段
因为你在main.js引入的时候定义了en和zh

const i18n = new VueI18n({
  locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages:{
    'zh': Object.assign(require('./VueI18n/language-zh.json'), require('./VueI18n/demo-zh.json')),
    'en': Object.assign(require('./VueI18n/language-en.json'), require('./VueI18n/demo-en.json'))
  }
});

说一下遇到的问题:

因为是团队开发,所以每个人都需要一个中英文的json文件,这就需要把这些人的json文件汇总,一开始的想法是怎么在一个json文件中加载其他json文件,其实把这个问题简化就是合并object,从这个角度看问题的话,问题就很好解决了.
也就是在main.js里面把这一步提前做到了,应用 Object.assign()方法,把对象合并,问题解决.

最后编辑于：2020.10.14 10:15:52