美文网首页
vue+ElementUI+vue-I18n 新手

vue+ElementUI+vue-I18n 新手

作者: 山已几孑 | 来源:发表于2022-04-08 15:49 被阅读0次

    环境:

    • "vue": "^2.6.14",
    • "element-ui": "^2.15.6",
    • "vue-i18n": "^7.8.1",

    新手,勿喷
    反正是各种查,各种试,最后可以了

    版本有一定关系, vue-i18n 在8.x和9.x的时候,都不行
    错误为TypeError: undefined is not an object (evaluating 'plugin.install')

    以中英文为例

    1. 安装 npm i --save vue-i18n@7.x
    2. 创建语言配置文件en.js, zh.js
    // en.js
    import enLocale from 'element-ui/lib/locale/lang/en'
    const en = {
      'menu': {
        'home': 'Home',
        'about': 'About',
        'solution': 'Solution',
        'service': 'Service',
        'news': 'News',
        'contact': 'Contact Us'
      },
      ...enLocale
    }
    export default en
    
    // zh.js
    import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
    const zh = {
      'menu': {
        'home': '公司首页',
        'about': '关于',
        'solution': '产品和解决方案',
        'service': '服务',
        'news': '新闻',
        'contact': '联系我们'
      },
      ...zhLocale
    }
    export default zh
    
    1. 创建i18n的配置文件
    // i18n.js
    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    import ElementLocal from 'element-ui/lib/locale'
    import zh from './zh'
    import en from './en'
    
    Vue.use(VueI18n)
    
    const messages = {
      en,
      zh
    }
    // Create VueI18n instance with options
    const i18n = new VueI18n({
      locale: 'zh', // set locale
      messages // set locale messages
    })
    // 这个设置是关键的,其他教程有各种写法,但是这个版本下,这个可以
    ElementLocal.i18n((key, value) => i18n.t(key, value))
    
    export default i18n
    
    
    1. main.js 中添加i18n
    import i18n from './languages/i18n'
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      i18n,
      components: { App },
      template: '<App/>'
    })
    
    

    相关文章

      网友评论

          本文标题:vue+ElementUI+vue-I18n 新手

          本文链接:https://www.haomeiwen.com/subject/xjzmjrtx.html