Vue+vue-i18n實現國際化(中英文切換)

存在相關環境，安裝相關插件:npm i vue-i18n element-ui -S

注：獲取瀏覽器系統語言    const navLang = navigator.language

vue+vue-i18n實現國際化

相關目錄：創建相關文件夾，並創建lang文件夾及i18n.js，在lang文件夾中創建en.js，zh.js，index.js

 i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './lang'
Vue.use(VueI18n);
const i18n = new VueI18n({
     locale: localStorage.getItem('LANGUAGE') || 'zh',//防止刷新瀏覽器恢復默認值
     message  
});
export default i18n;

index.js

import en from './en'
import zh from './zh'
export default {
    en,
    zh
}

zh.js和en.js分別對應自定義的中英文內容

const zh = {     //zh
     commons: {
         change: '切換'      
     }
}
export default zh;

const en = {     //en
     commons: {
         change: 'Change'      
     }
}
export default en;

 

注意：zh.js和en.js中的鍵應該保持一致

main.js中引入並注冊全局

vue文件中應用：

<button @click="changeLanguage">{{$t('commons.change')}}</button>

切換：

data() {
    return {
        lang: 'zh'
    }
},
methods: {
    changeLanguage() {
         if(this.lang === 'zh'){
             this.lang ='en';
             this.$i18n.locale = this.lang;
             localStorage.setItem("LANGUAGE",this.lang);
         }else{
             this.lang ='zh';
             this.$i18n.locale = this.lang;
             localStorage.setItem("LANGUAGE",this.lang);
         }
    }
}