vue使用多语，最常见的就是 vue-i18n, 但是如果开发中的多语很少，比如就不到10个多语，这样就没必要引入vue-i18n了， 引入了反正导致代码体积大了，这时候单纯用vue实现多语就是比较好的选择。
第一步
首先建立一个locales.js 存放多语语言包的内容，这里只写了 zh-CN, en这两种语言，其他还想新增的话 方法一样，代码如下：
export default {
'zh-CN': {
name: '我是中文名字'
},
'en': {
name: 'I am English name'
}
}第二步
通过浏览器的语言环境，获取对应的语言包，并吧语言包值付给 data 中的 locales
data () {
return {
locales: (() => {
// this.lang是父组件传递过来的， 这里的意思就是lang 优先使用父组件传递的语言，如果没有传递，就使用浏览器的语言（navigator.language）const lang = this.lang || navigator.language
let useLang = /^zh/.test(lang) ? 'zh-CN' : /^en/.test(lang) ? 'en' : lang
// Object.keys 获取可枚举的属性 如果浏览器的语言不是英语 中文， 而且传递的lang参数也不是这两种之一，就默认使用 zh-CN
if (!Object.keys(locales).includes(useLang)) useLang = 'zh-CN'
return locales[useLang]
})(),
}
},
这个locales最终返回的是一个对象，比如，如果是中文环境，返回的数据如下：
{
name: '我是中文名字'
}第三步
既然语言包都获取到了，还剩一个从语言包里面 获取对应key的方法：
methods: {
$_t (key) {
// this.locales就是上面那个对象
let localeStr = this.locales[key]
return localeStr
}
}通过$_t这个方法，传入key，就可以获取到对应的value
总结&优化：
这样就实现了不用依赖vue-i18n这样的外部依赖，只使用vue就实现了多语；
$_t 这个方法可以放到 mixins 里面就避免了每次都要引入这个方法。