前言

在工作中遇到需要适配多个国家的语言，尝试过许多种方案，最终觉得这个插件解决的很快非常不错 看到网上对此教程的不多，所以在工作之余突发奇想写一篇记录一下本人使用此插件的过程。

第一次写文章。如有错误的地方还请大佬们多多指教

一、安装

npm i vue-i18n@8.27.2 （也需要安装Vuex）

我这里用的是8.27.2版本

二、创建目录

在src目录下创建名为locale目录（什么名字都可以引入地方对应就行） 并创建index.js文件

每个英文简写的目录中都包含所需国际化适配的语言 下方为目录中对应语言下的json文件内格式

（例:en） { "index":{ "home":"home","my":"my" } }

（例:zh） { "index":{ "home":"家","my":"我的" } }

注：一定要保证键的对应，值为切换不同语言显示不同的文字

三、注册和引入

首先在main.js中引入对应locale下创建的index.js文件

import i18n from './locale/index';

new Vue({
  el: '#app',
  router,
  store,
  i18n,//把创建的i18n实例绑定到Vue组件中
  render: h => h(App)
})

在locale目录下index文件中引入vue-i18n,并注册该插件，以及对应所有语言的目录

import Vue from 'vue';
import VueI18n from 'vue-i18n'
import en from './en'
import zh from './zh-TW'
Vue.use(VueI18n)

声明一个对象存放当前所有支持的语言

const message = {
    en,
    zh,
    ...
}
const Default_Language = zh 

const i18n = new VueI18n({
	locale: Default_Language , //设置默认语言
	messages: message, // 配置所有语言
  })
  
  
 const init = Vue.prototype._init

Vue.prototype._init = function (options) {
  init.call(this, {
    i18n,
    ...options,
  })
}

export default i18n

在Vuex store目录中引入

import i18n from '../locale/index';

并在mutations方法中加入此方法

setLan(_, lan) {
      i18n.locale = lan
    },

四、使用

1.在页面中创建切换语言的按钮（可封装组件）

在页面中创建所需要切换语言的样式这里我就不再详细描述 当所对应语言的时候 调用一个方法 把locale配置当前语言的对应message对象中的某个值 使用Vuex的方法

onSelect(e) {
    //e为locale配置当前语言的对应message对象中的某个值例如
    //汉语为zh 英文为en
    this.$store.commit("setLan", e); 
}

2.内容的引用

在标签中html页面中直接使用

{{$t('index.home')}}

在js中

this.$t('index.home')

如果遇到一句话中不想翻译的标题或者名称

下方为目录中对应语言下的json文件内格式

（例:en） { "index":{ "home":"{msg} home","my":"my" } }

{{ $t("index.home", { msg: 'CCC' }) }} //此处CCC为你不想翻译的单词或者标题等

五、注意（使用心得）

在使用国际化的过程中最需要注意的是样式的适配，及CSS样式尽量不要设置死宽度多多运用内边距处理等，这样不会造成切换语言，造成样式裂开等问题

这样就大功告成啦 ！！！！如有哪里不对的地方欢迎各位指正，与帮助，如果有不懂的小伙伴可以在下方评论或者私信，看到就会回哦。

原创不易，转载请声明谢谢。