Vue i18n 国际化中英文切换

版权声明：标明原创的版权均归本人所有，任何人或团体、机构全部转载或者部分转载、摘录，请保留本博客链接或标注来源。 https://blog.csdn.net/qq_40701522/article/details/80900523

最近做的vue项目要实现国际化语言，自己琢磨看文档写出了一个简单的不能再简单的demo，供大家参考!

注：vue-cli项目

1. npm安装

    npm install vue-i18n --save

2. i18n使用，在项目入口文件 main.js 中引入  

    import VueI18n from 'vue-i18n'；

   在 src 目录下创建一个 language 的文件夹，里面建两个 js

    import en from './language/en'；        // 引入en.js 英文内容

    import cn from './language/cn'；         // 引入cn.js 中文内容

    Vue.use(VueI18n)

    const i18n = new VueI18n({

        locale: 'cn',    // 语言标识        

        messages: {

             'cn' : require('./language/cn');

             'en' : require('./language/en');

            }

        })

    vue实例中引入

    new Vue({

        el: '#app',

        router,

        i18n,

        render: h => h(APP)

    })

3. cn.js 和 en.js 内容

    cn.js

[code]module.exports = {
  navList:{
solution: 'Solution',
product: 'Product',
place:'请输入搜索内容'
}
}

[code] 

    en.js

[code]module.exports = {
  navList:{
solution: 'Solution',
product: 'Product',
place:'Please enter the search content'
}
}

[code] 

4. 页面中使用

    <div class="con">{{ $t('navList.solution') }}</div>

    <div class="box">{{ $t('navList.product') }}</div>

    input框中 placeholder 的写法  

    <input type="text" :placeholder="$t('navList.place')">

5. 页面中英文切换（需要写点击事件）

    tabCn: function(){

             this.$i18n.locale = 'cn'           

         },

    tabEn: function(){

             this.$i18n.locale = 'en'           

         }

如果大家有更好的方法，欢迎留言讨论

阅读更多