vue-i18n

在src/目錄下新建lang文件夾
lang/文件中有en.js,index.js,zh.js
例如en.js

export default{
    route:{
        'home':'home',
        'component':'component',
        'permission':'permission',
        'i18n':'i18n',
        'drag':'drag',
        'permission-instruction':'permission instruction',
        'permission-page':'permission page'
    },
    login:{
        'title':'admin-vue'
    }
   
}

zh.js

export default{
    route:{
        'home':'首頁(yè)',
        'component':'組件',
        'permission':'權(quán)限',
        'i18n':'語(yǔ)言切換',
        'drag':'拖拽',
        'permission-instruction':'權(quán)限指令',
        'permission-page':'權(quán)限頁(yè)面'
    },
    login:{
     'title':'后臺(tái)登錄'
    }
}

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'

const messages={
    en:{ 
        ...enLocale,
        ...elementEnLocale
    },
    zh:{ 
      ...zhLocale,
      ...elementZhLocale
    }
}

const i18n=new VueI18n({
    locale:'zh',
    messages,
})

export default i18n

在main.js中引入

import i18n from './lang/index.js'
new Vue({
  el: '#app',
  i18n,
  components: { App },
  template: '<App/>'
})

在組件中的使用
在模板中使用<p>{{ $t("route.home") }}</p>
在有的項(xiàng)目中需要循環(huán)側(cè)邊欄導(dǎo)航，所以寫了一個(gè)工具方法

const generateTitle=function(title){
    const hasKey=this.$te('route.'+title)
    const translatedTitle=this.$t('route.'+title)
    if(hasKey){
        return translatedTitle
    }
   
    return title
}
export {generateTitle}

在組件中使用時(shí)，引入這個(gè)工具方法

語(yǔ)言的切換

vue-i18n其他的國(guó)際化

請(qǐng)參考
vue-i18n

jquery-i18n-properties

這是不用vue時(shí)，js的前端國(guó)際化
一般會(huì)新建一個(gè)文件存放語(yǔ)言信息
i18n/language_en.properties

language_text=Hello world!
language_lang=Chinese

i18n/language_zh.properties

language_text=你好，世界
language_lang=中文

html文件

<script src='xxx/jquery-i18n-properties.js'></script>
<div>
        <p id="text" data-locale='string_text'></p>
        <button onclick="switchLang()" id="lang" data-locale='string_lang'></button>
    </div>
<script>
  var LANGUAGE_CODE = "zh"; //標(biāo)識(shí)語(yǔ)言
function loadProperties(type) {
    jQuery.i18n.properties({
        name: 'language', // 資源文件名稱
        path: 'i18n/', // 資源文件所在目錄路徑
        mode: 'map', // 模式：變量或 Map
        language: type, // 對(duì)應(yīng)的語(yǔ)言
        cache: false,
        encoding: 'UTF-8',
        callback: function () { // 回調(diào)方法
           $("[data-locale]").each(function(){
                    console.log($(this).data("locale"));
                    $(this).html($.i18n.prop($(this).data("locale")));

            });
        }
    });
}

function switchLang() {
    LANGUAGE_CODE = LANGUAGE_CODE == 'zh' ? 'en' : 'zh';
    loadProperties(LANGUAGE_CODE);
}

$(document).ready(function () {
    LANGUAGE_CODE = jQuery.i18n.normaliseLanguageCode({}); //獲取瀏覽器的語(yǔ)言
    loadProperties(LANGUAGE_CODE);
})
</script>

參考jquery-i18n-properties