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"

扫描二维码关注公众号，回复： 5245632 查看本文章

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" />

vue项目中实现多语言切换

猜你喜欢