19. Vue + i18n multi-language translation

1. npm install

　　npm install vue-i18n

I18n folder through lower clamp member 2. src / assets file,

　　Langs then create folders and files in i18n.js i18n folder,

　　Finally, create a file in the appropriate language langs folder, I have here is cn.js Chinese documents, en.js English documents.

　　As shown (corresponding file in the code below):

3.main.js inlet import file, and add the new Vue i18n example:

　　import i18n from './assets/i18n/i18n' // introduced English language translation files

　　new view ({

　　　　the '#app'

　　　　store,

　　　　router,

　　　　 i18n,

　　　　components: { App },

　　　　template: '<App/>'

　　})

4.i18n.js file:

Vue from Import 'VUE' 
Import from the locale 'UI-Element / lib / the locale'; 
Import VueI18n 'VUE-the i18n' from 
Import from EN './langs/en' 
Import CN './langs/cn' from 
// Import from TN './langs/tn' 
Vue.use (VueI18n) 

const = {messages 
  EN: EN, 
  CN: CN, 
// TN: TN 
} 

const = new new VueI18n the i18n ({ 
  the locale: sessionStorage.getItem ( 'changeLang') || 'cn', // get the user to select a language from sessionStorage, if not, then the default Chinese. 
  messages, 
  silentTranslationWarn: to true, 
}) 
// locale.i18n ((Key, value) => I18n.t ( key, value)) // to achieve multi-language switching element widget 

// Vue.use (the element, { 
  the i18n: (Key, value) => the i18n.t(key, value)
// })

export default i18n

5. cn.js file:

CN = {const 
    the Message: { 
        I1: 'Welcome to my project', 
 
        public: { 
            aaa: 'You can not see me', 
        }, 
    } 
} 

Export default CN

6. en.js file:

const en = {
    message: {
        i1: 'Welcome to my project',

        public: {
            aaa: 'You dont see me',
        },
        
    }
}

export default en

7.Vuex of store.js file stores the current state of the language (not installed vuex rely on their own to install):

// vue introduction and vuex 
Import from Vue 'vue'; 
Import Vuex from 'vuex'; 

// use vuex plug, like Router 
Vue.use (Vuex);               

// Store instance of the derived directly 
export default new Vuex.Store ({ 
    state: {              
        Language:? sessionStorage.getItem ( 'changeLang') sessionStorage.getItem ( 'changeLang'): 'CN', 
    }, 
    getters: { 

    }, 
    // synchronization state to directly modify the data inside 
    mutations: { 
        setLanguage : (State, Data) => { 
            state.Language = Data; 
            sessionStorage.setItem ( 'changeLang', Data); 
        }, 
    } 
});

8. Use the page:

　　1. Text format: <div> {{$ T ( 'message.public.aaa')}} </ div>

　　2.input的placeholder：<el-input type="text" v-model=" " autocomplete="off" :placeholder="$t('message.public.aaa')"></el-input>

　　3.data in:

data() {
    var validateAccount = (rule, value, callback) => {    // 验证规则
        if (value === '') {
           callback(new Error(this.$t('message.public.aaa')));
        } else {
           callback();
        }
    };        
}

4. Verify rules used, specifically to see another document: https://www.cnblogs.com/xintao/p/11138500.html

19. Vue + i18n multi-language translation

Guess you like