vue項目中實現多語言切換

公司項目需要添加多語言切換功能，考慮到是vue2.0項目，采用vue-i18n。不適用第三方，自己寫實現，下文也寫了。

一、vue-i18n實現

  1、安裝：npm i vue-i18n -save

        安裝后：package.json中

        

 

        再看下node_modules中:

　　

 2、main.js主入口引入：

     

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

Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: 'chs', // 將要切換的語言，可以通過url拼的參數獲取，用戶行為select選擇獲取，本地manifest配置獲取等，根據場景動態獲取
    messages: {
      'chs': require('../../assets/languages/chs.json'),  // 本地資源文件，我這里配2個語言，中文&英文，src下根據個人情況放置
      'en': require('../../assets/languages/en.json')
    }
});

const app = new Vue({
    el: '#app',
    i18n,
    router,
    store,
    components: { App },
    template: '<App/>,
    mounted: function () {
      console.log('mounted');
    }
});

chs.json文件

// 我分2級，home是頁面模塊,say是首頁內需要的語言包文字內容
{
  "home": {
    "say": "你好"
  }
}

  en.json文件類似cha.json  值 你好改成"hello"

 2、vue頁面使用：     

// html中
<div>{{$t('home.say')}}</div>
<input type="text" :value="$t('home.say')">

// js中

mounted () {
    let vm = this;
    vm.$t('home.say');
}

到這 VueI18n 解決語言包問題結束

二、本地不用插件實現

1、新建本地json文件

// 根據需求，有多少種語言，建多少個json文件

// chs.json文件

{
  "home": {
    "say": "你好"
  }
}



// en.json文件

{
  "home": {
    "say": "hello"
  }
}

 

2、main.js主入口引入並注入vue

// 讀取本地json語言包
const LANGUAGES = {
   chs: require('../../assets/languages/chs.json'),
   en: require('../../assets/languages/en.json')
}

// 注入vue
new Vue({
    components: {App},
    template: '<App :LANGUAGES ="LANGUAGES" '/>',
    data: {
       LANGUAGES： LANGUAGES['en'] // en這個值，根據項目情況動態獲取
    },
    mounted: function () {
      console.log('mounted');
    }
});

3、app.vue使用

export default {
    data(){
        return {
        }
    },
    props: {
      LANG: Object
    },
    mounted () {
      let vm = this;
      console.log(vm.LANG); // js中使用
    }
}   

// html中使用
<div>{{LANG}}</div>
<input type="text" :value="LANG" />