Vue2 配置多语言
一、创建 lang文件夹
引入依赖文件
npm install vue-i18n -save
二、配置 main.js
main.js中加入依赖
import i18n from './lang'
在注册Element时设置i18n的处理方法
Vue.use(ElementUI,{
i18n: (key, value) => i18n.t(key, value)// 在注册Element时设置i18n的处理方法
})
注册到 vue组件中
new Vue({
el: '#app',
i18n,
render: h => h(App)
})
三、创建 lang文件夹
在 src 中创建lang文件夹，接着在lang文件夹中创建 en.js 、 zh.js 、index.js 文件
en,js
export default {
message:{
acount: 'Acount',
password: 'Password'
},
login: { // 登录模块
title: 'Unimatter Login',
username: 'username',
userNamePlaceholder:'Please enter the user name',
password: 'passward',
passwordPlaceholder:'Please enter your password',
logIn: 'login',
},
}
zh.js
export default {
message: {
acount: '账号',
password: '密码'
},
login: { // 登录模块
title: '登录',
username: '用户名',
userNamePlaceholder:'请输入用户名',
password: '密码',
passwordPlaceholder:'请输入您的密码',
logIn: '登录',
},
}
index.js 直接复制即可
import Vue from 'vue' //引入vue
import VueI18n from 'vue-i18n' //引入vue的国际化插件
import Cookies from 'js-cookie' //我这里需要，所以引入轻量级的处理cookies的js
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import zhLocale from './zh' //本地创建的中文环境配置文件
import enLocale from './en' //本地创建的英文环境配置文件
Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件
const messages = {
en: {
...enLocale,
...elementEnLocale
},
zh: {
...zhLocale,
...elementZhLocale
}
}
//获取当前语言环境，通过后台返回的语言或者浏览器语言环境
export function getLanguage() {
const chooseLanguage = Cookies.get('language')//取后台设置的语言
if (chooseLanguage) return chooseLanguage
//如果后台没有返回语言则根据浏览器的语言环境返回语言变量
const language = (navigator.language || navigator.browserLanguage).toLowerCase()
const locales = Object.keys(messages)//获取前端设置的所有语言
//遍历所有语言值组成的数组，匹配前端设置的语言能匹配到就返回改语言值
for (const locale of locales) {
if (language.indexOf(locale) > -1) {
return locale
}
}
//如果都没匹配到就直接返回英文
return 'en'
}
const i18n = new VueI18n({
//语言标识 this.$i18n.locale 通过切换locale的值来实现语言切换
//如：this.$i18n.locale='en' 直接切换成英文，仅限于配置了语言的一些变量
locale: getLanguage(),//调的上边这个函数
messages //上边配置的语言标识对应的不同配置
})
export default i18n
四、配置 store 文件
在store.modules.app.js 文件中加入以下代码，如果没有给文件可以自己创建
const state = {
sidebar: {
language: Cookies.get('language') || 'zh'
},
device: 'desktop'
}
const mutations = {
SET_LANGUAGE: (state, language) => {
state.language = language
Cookies.set('language', language)
}
}
const actions = {
setLanguage({ commit }, language) {
commit('SET_LANGUAGE', language)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
五 创建切换中英文组件
在components 中创建 langSelect文件夹，在创建 index.vue组件 代码直接复制即可
<template>
<el-dropdown trigger="click" @command="handleSetLanguage">
<div class="select-language"><img src="@/assets/404_images/lang.png" alt=""></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :disabled="language==='zh'" command="zh">
中文
</el-dropdown-item>
<el-dropdown-item :disabled="language==='en'" command="en">
English
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
computed: {
language() {
return this.$store.state.app.language
}
},
mounted(){
// console.log('000',this.$store.state.app.language)
},
methods: {
handleSetLanguage(lang) {
console.log("lang",lang)
this.$i18n.locale = lang
this.$store.dispatch('app/setLanguage', lang)
this.$message({
message: 'Switch Language Success',
type: 'success'
})
}
}
}
</script>
<style>
.select-language img {
height: 30px;
}
</style>
注意 这段代码中存在 img标签，src地址注意修改为自己项目中的图片地址
使用 示例
- 将交换中英文按钮组件插入到代码中
<lang-select class="set-language " />
- 示例在 登录页面使用 这段代码看看就可以，里面有多语言具体的使用方式，下面也会详细指出来
<template>
<div class="login-container">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
<div class="title-container">
<h3 class="title">{{ $t("login.title") }}</h3>
</div>
<el-form-item prop="username">
<span class="svg-container">
<svg-icon icon-class="user" />
</span>
<el-input
ref="username"
v-model="loginForm.username"
:placeholder="$t(`login.userNamePlaceholder`)"
name="username"
type="text"
tabindex="1"
auto-complete="on"
/>
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input
:key="passwordType"
ref="password"
v-model="loginForm.password"
:type="passwordType"
:placeholder="$t(`login.passwordPlaceholder`)"
name="password"
tabindex="2"
auto-complete="on"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
</el-form-item>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">{{ $t("login.logIn") }}</el-button>
</el-form>
</div>
</template>
双花括号显示： login 时 zh.js或者 en.js 中的对象，title为对象中的属性，下同
{{ $t("login.title") }}
组件 中的 lable 以及 placeholder 属性使用,其实是使用 v-bind,缩写为 ’ ：‘
<el-form-item :label="$t('documentList.selectDocument')">
<el-select
v-model="selectfrom.typeId"
:placeholder="$t('documentList.typeId')"
clearable
>
</el-select>
</el-form-item>
总结
自己总有一天会忘，那就记下来吧，如果有幸能帮到别人，那就更好。如果有哪里错误，希望大家指出，我可不想误导别人。