vue多语言化

落日映苍穹つ 2021-09-07 17:56 293阅读 0赞

随着国际化的趋势，项目中配置多语言切换也越来越有必要，本篇文章将会介绍如何在vue项目中配置多语言化

*  安装：
    
        npm i vue-i18n
 *  导入注册：(因为后续可能涉及很多配置翻译，所以我们提前把配置抽离为单独的文件)
    
        // src/plugins/VueI18n/index.js：
        import Vue from 'vue';
        import VueI18n from 'vue-i18n';
        Vue.use(VueI18n);
        
        // 定义各语言的配置
        const messages = {
            zn: {
                message: {
                    hello: '你好，世界',
                },
                name: '可乐',
            },
            en: {
                message: {
                    hello: 'hello world',
                },
                name: 'cola',
            },
            ja: {
                message: {
                    hello: 'こんにちは、世界',
                },
                name: 'コーラ',
            },
        };
        
        // 通过选项创建 VueI18n 实例
        const i18n = new VueI18n({
            locale: 'zn', // 设置默认地区
            messages, // 设置配置信息
        });
        
        export default i18n;
 *  vue实例绑定i18n：
    
        // src/main.js
        import i18n from './plugins/VueI18n/index';
        
        new Vue({
            router,
            store,
            i18n,
            render: h => h(App),
        }).$mount('#app');
 *  vue文件中使用(插值表达式使用 $t )：  
    可以提前配置好语言数组，通过切换时，改变 $i18n.locale 时区，即可做到语言切换（chooesLange方法）  
    插值表达式使用 $t(‘xx’) 写法，xx即为messages配置中的字段
    
        <template>
            <div class="about">
                <h1>{
             { $t('message.hello') }}</h1>
                <h1>{
             { $t('name') }}</h1>
                
                <div class="mt-6">
                    <p @click="isChoose = true" style="cursor:point">请选择语言</p>
                    <ul v-if="isChoose">
                        <li v-for="(item, index) in languages" :key="index" @click="chooesLange(item[0])">{
             { item[1] }}</li>
                    </ul>
                </div>
            </div>
        </template>
        
        <script> export default { data() { return { languages: new Map([ ['zn', '中文'], ['en', 'English'], ['ja', '日本语'], ]), isChoose: false, }; }, methods: { chooesLange(languageItem) { this.$i18n.locale = languageItem; this.isChoose = false; }, }, }; </script>
        
        <style scoped> p, ul { cursor: pointer; } </style>
 *  效果：  
    ![在这里插入图片描述][20210513201132904.gif_pic_center]
    
    哈哈，样式比较丑，到时候可以根据项目设计自己做调整。
    
    以上即为在普通的vue项目中实现多语言化的效果。
    
    如有问题，请指出，接受批评。
    
    期待能够对你有所帮助~  
    ![在这里插入图片描述][20210513201605156.gif_pic_center]

[20210513201132904.gif_pic_center]: /images/20210813/6e24e8f90c264c52a1968ca548a6a409.png
[20210513201605156.gif_pic_center]: /images/20210813/ba22af173dfb473db173d6e469f3e7b5.png