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: '<App/>',
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：
在相应位置引用此组件即可。
在页面上绑定：
<span>{{$t('version.email')}}</span>
<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