vue-i18n是一款针对Vue.js 的国际化插件，具体应用步骤如下：
一、安装插件
npm install vue-i18n --save
二、在main.js中引入插件
import VueI18n from ‘vue-i18n‘
Vue.use(VueI18n)
三、创建i18n实例
const i18n = new VueI18n({ // 默认语言 locale: ‘zh‘, // 引入对应的语言包文件 messages: { ‘zh‘: require(‘@/assets/languages/zh.json‘), ‘en‘: require(‘@/assets/languages/en.json‘) } });
注：为了在页面刷新后仍然能够保持当前的语言环境，一般会将语言参数缓存到localStorage中，locale属性的初始赋值方式会变为 locale: localStorage.getItem(‘lang’) || ‘zh’
四、在assets目录下新建对应的语言json文件
// zh.json { "message": { "greeting": "你好" } } // en.json { "message": { "greeting": "hello" } }
注：json文件中的key值必须使用双引号。
五、使用
// 在template中的使用方式: <span>{{$t(‘message.greeting‘)}}</span> // 在script脚本中的使用方式: this.$t(‘message.greeting‘)
六、语言切换
语言切换只要改变i18n实例中locale的值即可:
this.$i18n.locale = ‘en’； localStorage.setItem(‘lang’, ‘en’)
上述呢就是vue国际化的基础用法~
原文：https://www.cnblogs.com/fengyuexuan/p/12063674.html