zoukankan      html  css  js  c++  java
  • 使用vue-i18n实现项目的国际化 以及iview的国际化

    一:项目的国际化

    vue-i18n官网

    1. 在src中新建一个language文件夹(包含index.js、US.js、CN.js)

    (1)US.js 保存变量的英文,内容:
    export default {
        name: "I am english!!"
    }
    
    (2)CN.js 保存变量的中文,内容:
    export default {
        name: "我是中文!!"
    }
    
    (3)index.js vue-i18n配置,内容:
    import Vue from 'vue';
    import VueI18n from 'vue-i18n';
    import US from './US';
    import CN from './CN'
    Vue.use(VueI18n);
    const i18n = new VueI18n({
        locale: 'zh',
        messages: {
            en: US,
            zh: CN
        }
    });
    export default i18n
    

    2. 在main.js引入

    import i18n from "./language"
    new Vue({
      el: '#app',
      i18n,
      template: '<App/>',
      components: {
        App
      }
    })
    

    二:iview的国际化

    将上面language文件夹下面的index.js添加相关内容,改成如下内容:

    import Vue from 'vue';
    import VueI18n from 'vue-i18n';
    import US from './US';
    import CN from './CN';
    
    import iView from 'iview';
    import en from 'iview/dist/locale/en-US';
    import zh from 'iview/dist/locale/zh-CN';
    
    Vue.use(VueI18n);
    const i18n = new VueI18n({
        locale: localStorage.getItem("locale") || 'zh', 
        messages: {
            en: Object.assign(US, en),  //将自己的英文包和iview提供的结合
            zh: Object.assign(CN, zh)  //将自己的中文包和iview提供的结合
        }
    });
    Vue.use(iView, {
        i18n: (key, value) => i18n.t(key, value)
    })
    export default i18n
    

    我这是通过网络搜寻出来的方法,按照iview官网进行国际化配置并没有生效,不知为何,求大神指导~~~

    三.测试

    代码:

    <template>
        <div class="test">
          <Button @click="toZh">切换成中文</Button>
          <Button @click="toEn">切换成英文</Button>
          <div>name名称:{{$t("name")}}</div>
          <div>
            iview页码组件:
            <Page :total="10" show-total />
          </div>
        </div>
    </template>
    
    <script>
    export default {
      name: "Home",
        methods: {
        toZh() {
          this.$i18n.locale = "zh";
        },
        toEn() {
          this.$i18n.locale = "en";
        }
      }
    }
    </script>
    

    效果:

  • 相关阅读:
    一张图片入门Python
    4.1. 如何在Windows环境下开发Python
    你必须知道的EF知识和经验
    XUnit的使用
    如何使用NUnit
    Entity Framework 不支持DefaultValue
    Have You Ever Wondered About the Difference Between NOT NULL and DEFAULT?
    Validation failed for one or more entities. See 'EntityValidationErrors' property for more details
    Entity Framework 与多线程
    sqlite中的自增主键
  • 原文地址:https://www.cnblogs.com/XHappyness/p/11806927.html
Copyright © 2011-2022 走看看