1、安装 vue-i18n + js-cookie 插件
npm install vue-i18n -S
npm install js-cookie --save
即在package.json中dependencies节点添加vue-i18n
"vue-i18n": "7.3.2",
2、配置多语言文件
src目录下创建lang目录，存放国际化文件此处包含三个文件，分别是 index.js zh.js en.js
// index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'
Vue.use(VueI18n)
const messages = {
en: {
...enLocale,
...elementEnLocale
},
zh: {
...zhLocale,
...elementZhLocale
}
}
const i18n = new VueI18n({
// 设置语言 选项 en | zh
locale: Cookies.get('language') || 'en',
// 设置文本内容
messages
})
export default i18n
// zh.js
export default {
login: {
title: '后台管理系统',
logIn: '登录',
username: '账号',
password: '密码'
},
tagsView: {
refresh: '刷新',
close: '关闭',
closeOthers: '关闭其它',
closeAll: '关闭所有'
},
settings: {
title: '系统布局配置',
theme: '主题色',
tagsView: '开启 Tags-View',
fixedHeader: '固定 Header',
sidebarLogo: '侧边栏 Logo'
}
}
// en.js
export default {
login: {
title: 'Login Form',
logIn: 'Log in',
username: 'Username',
password: 'Password'
},
tagsView: {
refresh: 'Refresh',
close: 'Close',
closeOthers: 'Close Others',
closeAll: 'Close All'
},
settings: {
title: 'Page style setting',
theme: 'Theme Color',
tagsView: 'Open Tags-View',
fixedHeader: 'Fixed Header',
sidebarLogo: 'Sidebar Logo'
}
}
3、引入
在src/main.js中增量添加i18n
import i18n from './lang'
// use添加i18n
Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
})
new Vue({
i18n,
})
4、创建汉化组件
自定义组件，方便使用，也可不定义直接使用
<template>
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
<div>
<svg-icon class-name="international-icon" icon-class="language" />
</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>
import Cookies from "js-cookie";
export default {
computed: {
language() {
return Cookies.get('language')
}
},
methods: {
handleSetLanguage(lang) {
// 第一个参数是名字，第二个参数是当前的语言，第三个参数是表示 cookie 过期时间，可能是6（天）
Cookies.set('language',lang,6)
if (lang==='en') {
this.$message({
message: 'Set language successfully',
type: 'success'
})
}else{
this.$message({
message: '设置语言成功',
type: 'success'
})
}
}
}
}
</script>
5、登录页使用组件
<template>
<div class="el-login-head">
<lang-select class="set-language" />
</div>
</template>
<script>
import LangSelect from '@/components/LangSelect'
export default {
name: "Login",
components: {
LangSelect },
data(){
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.el-login-head {
height: 40px;
line-height: 40px;
position: fixed;
top: 50px;
right: 100px;
width: 100%;
text-align: right;
}
</style>
//普通文本使用方式：
{
{
$t('login.title') }}
//标签内使用方式：
:placeholder="$t('login.password')"
//js内使用方式
this.$t('login.user.password.not.match')
6、在js文件中使用国际化
例：在router中使用国际化
import i18n from '../lang'
export const constantRoutes = [
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: (resolve) => require(['@/views/redirect'], resolve)
}
]
},
{
path: '/gen',
component: Layout,
hidden: true,
children: [
{
path: 'edit',
component: (resolve) => require(['@/views/tool/gen/editTable'], resolve),
name: 'GenEdit',
meta: {
title: i18n.t('router.gen') }
}
]
}
]
// 即在引入后使用
i18n.t('')
7、与后台同步切换语言文件
利用封装的request.js对发给后台的接口Header进行统一处理
import axios from 'axios'
import {
Notification, MessageBox, Message } from 'element-ui'
import store from '@/store'
import {
getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import cookie from 'js-cookie'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers['Accept-Language'] = cookie.get('lang')==='en'?'en_US':'zh_CH' || 'en_US'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 72000000
})
// request拦截器
service.interceptors.request.use(config => {
// 是否需要设置 token
const isToken = (config.headers || {
}).isToken === false
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const message = errorCode[code] || res.data.msg || errorCode['default']
if (code === 401) {
MessageBox.confirm(
'登录状态已过期，您可以继续留在该页面，或者重新登录',
'系统提示',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
})
} else if (code === 500) {
Message({
message: message,
type: 'error'
})
return Promise.reject(new Error(message))
} else if (code !== 200) {
Notification.error({
title: message
})
return Promise.reject('error')
} else {
return res.data
}
},
error => {
console.log('err' + error)
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
即在写入Header中
axios.defaults.headers['Accept-Language'] = cookie.get('lang')==='en'?'en_US':'zh_CH' || 'en_US'