Vue2中配置国际化语言切换

1.下载国际化包

npm i vue-i18n@8

2.src 新建i18n文件夹

main.js中加入如下代码

import Vue from 'vue'

import { Button, Select } from 'element-ui';

import App from './App.vue'

Vue.use(Button)

Vue.use(Select)

// 国际化

import i18n from './i18n'

Vue.config.productionTip = false

new Vue({

  i18n,

  render: h => h(App),

}).$mount('#app')

// 创建文件index.js

import Vue from 'vue';

import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

// 引入各个语言配置文件

import zh from './zh';

import en from './en';

// 创建vue-i18n实例i18n

const i18n = new VueI18n({

    // 设置默认语言

    locale: 'zh', // 语言标识

    // 添加多语言（每一个语言标示对应一个语言文件）

    messages: {

        zh,

        en,

    }

})

// 暴露i18n

export default i18n

en.js中插入如下代码:

 

// 创建文件en.js

const en = {

    admin: 'admin',

    test: 'hello',

    language: {

        zh: '中文',

        en: 'English',

    },

}

export default en;

zh.js中插入如下代码:

 

// 创建文件zh.js

const zh = {

    admin: '后台管理系统',

    test: '你好',

    language: {

        zh: '中文',

        en: 'English',

    },

}

export default zh;

 App.vue中进行语言切换,逻辑如下:

 

<template>

  <div id="app">

    <div>{{ $t('admin') }}</div>

    <el-button type="primary" @click="changeLang('zh')">中文</el-button>

    <el-button type="primary" @click="changeLang('en')">英文</el-button>

  </div>

</template>

<script>

export default {

  name: 'App',

  components: {

  },

  methods: {

    changeLang(val){

      console.log(val,'111')

      this.$i18n.locale=val

    }

  },

}

</script>