vue项目如何用vue-i18n实现国际化

在vue项目的开发中，如果你的项目面对的是来自世界各地的用户，那么你就要考虑你的项目是否需要进行国际化，比如常见的国际化就是讲项目里面的菜单、操作按钮设置成英文或者奇特语言，这样保证在国外用户在访问的时候也有一个很好的用户体验，这就要求我们在开发中进行国际化配置，在vue项目中，我们可以直接用vue-i18n这个插件进行国际化。下面介绍一下怎么用vue-i18n这个插件来实现国际化。

1、安装vue 国际化插件

npm I vue-i18n -S

2、在main.js中引入vue-i18n，然后创建还有选项的vuei18n实例，再把i18n挂载到vue根实例上

// main.js\n\nimport Vuei18n from ‘vue-i18n’\n\nVue.use(Vuei18n)\n\nconst i18n new VueI18n({\n\nlocale: ‘en’, // 语言标识\n\nmessages:{\n\n  ‘zh’:require(’./i18n/lang/zn’),\n\n  ‘en’:require(’./i18n/lang/en’)\n }\n\n})\n\nconst app = new Vue({\n\nrouter,\n\ni18n\n\n}).$mount("#app")

3、在项目根目录新建i18n目录，并新建对应的js文件

// zh.js\n\nconst message = {\n\ntitle: 我是中文\n\n}\n\n// en.js\n\nconst message = {\n\ntitle: 我是英文\n\n}

4、页面引用

{{$t('message.title')}}

5、切换语种，将this.$i18n.locale的值改成zh或en就可以完成切换

let lang = this.$i18n.locale\n\nif(lang === ‘zh’){\n\nthis.$$i18n.locale = ‘en’\n\n}\n\nif(lang === ‘en’){\n\nthis.$i18n.locale = ‘zh’\n\n}