vue中使用vue-i18n实现国际化配置以及js中语言切换

使用vuex进行状态管理

首先需要下载vue-i18n以及js-cookie：

    npm i vue-i18n 

    npm i js-cookie

目录文件：

|-- src

    |-- components  //组件

        |-- changeLang.vue

    |-- store

        |-- index.js

        |--modules

            |-- routes.js

    |-- lang // 语言库

        |-- en.js // 英文

        |-- zh.js // 中文

        |-- index.js  // 入口文件

    |-- main.js

    |-- app.vue

在main.js里面配置：

import i18n from './lang'

Vue. use( ElementUI, {

i18n : ( key, value) => i18n. t( key, value)

})

new Vue({

el: '#app',

router,

store,

i18n,

template: '',

components: { App}

})

lang--index.js

en.js: 

export default {

version: {

info: 'authorization info',

email: 'EMaill',

vs: 'version number '

}

}

zh.js:

export default {

version: {

info: '授权信息',

email: '邮箱',

vs: '版本号'

}

}

routes.js：

import Cookies from 'js-cookie'

const routes = {

state: {

language: Cookies. get( 'language') || 'zh'

    },

getters: {

language : state => {

return state. language

}

},

mutations: {

set_language : ( state, language) => {

state. language = language

Cookies. set( 'language', language)

}

}

}

export default routes

语言切换组件changeLang.vue：

在相应位置引用此组件即可。

在页面上绑定：

{{ $t( 'version.email')}}

< el-form-item :label=" $t( 'table.license_no')" prop= "license" >

< el-input v-model=" dataform. license" :disabled=" disabled" :placeholder=" $t( 'table.license_no')" > el-input >

el-form-item >

如果某些js中含有字符需要切换语言（包括rules），需要写在computed中。 

js中语言切换：

computed: {

rules1 () {

return {

upImg: [

{ required: true, message: this. $t( 'table.face_idnotEmpty'), trigger: 'blur'}

]

}

}

  }

语言切换参考项目： http://panjiachen.github.io/vue-element-admin/#/dashboard