element UI语言切换时遇到问题？

Question

各位下午好，我们的项目使用了vue-i18n@7.x作为语言切换插件，后来在项目中引入了elementUI,想把elementUI中的语言切换和该插件结合起来。我是这样做的：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import eleLocale from 'element-ui/lib/locale';
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n);

const locale = 'en-US' // default locale

const i18n = new VueI18n({
    locale,
    messages: {
        'en-US': {
            message: {
                hello:'hello world!'
            },
            enLocale
        },
        'zh-CN': {
            message: {
               hello:'你好，世界'
            },
            zhLocale
        }
    }
});
eleLocale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换

export default i18n

结果在页面中出现了这样的错误：

报错信息如下：

请各位指点，应该怎么办

Answer 1

已经解决了，用的是Object.assign({ message: 'hello' }, enLocale)方法
注意在使用该种写法时，需要把包在外面的大括号去掉

Answer 2

是不是模板语法有错，都渲染出来了

Answer 3

按照这个配置试试

Answer 4

建立一个language/index.js,内容如下：
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnUSLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhCNLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enUSLocale from './en_us'
import zhCNLocale from './zh_CN'
Vue.use(VueI18n)
const messages = {
en_us: Object.assign(elementEnUSLocale, enUSLocale),
zh_CN: Object.assign(elementZhCNLocale, zhCNLocale),
}
const i18n = new VueI18n({
locale: Cookies.get('language') || 'zh_CN',
messages
})

export default i18n

在main.js中引用

//语言
import i18n from './language'
Vue.use(ElementUI, {

i18n : (key,val)=>i18n.t(key,val),
size: 'small'

})
element的语言已经正确了，
如果前端引用自定义的用 $t方法