vue-i18n vue项目的国际化

最新推荐文章于 2024-07-30 10:33:05 发布

置顶 ADCarryhw

最新推荐文章于 2024-07-30 10:33:05 发布

阅读量172

点赞数

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/hewei1119/article/details/105927294

版权

项目国际化

最近团队开发的项目，客户需求要做国际化，之前没有考虑过这方面的需求，所以没有将静态文字单独作为配置文件来做，基本上全部的文字都是直接写在html标签中，现在要改，感觉好恼火，但客户是上帝哈，没办法，只能给人家搞了，废话不多说，看代码吧

  <!-- vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- vue-i18n 依赖包 -->
  <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
  <!-- 英语 常量 en 对象-->
  <script src="english.js"></script>
  <!-- 汉语 常量 cn 对象-->
  <!--    这是cn对象，en 对象跟其一样，只是属性值为英文
     const cn = {
      message: {
        hello: '你好',
        name: '小刺猬',
        info: '好可爱的人',
        lange: 'English'  // 把lange 在这里写成英文 只是为了切换方便
      }
    }  -->
  <script src="chinese.js"></script>
  <script>
        const messages = {}
        messages.en = en ;
        messages.cn = cn ;
        var i18n = new VueI18n({
            locale: 'cn',
            messages,
        })
        window.onload = function () {
            new Vue({
                i18n,
                el: '#app',
                data: function () {
                    return {
                       
                    }
                },
                methods: {
                  
                }
            })
        }
        function changeLanguage() {
            i18n.locale = i18n.locale == 'en' ? 'cn' : 'en'
        }
  </script>
<body>
  <div>
     <button onclick='changeLanguage()'>{{$t('message.lange')}}</button>
   </div>
</body>

具体的实现思路就是这样的，根据项目的情况去定义。