第一步:创建文件夹lang、文件夹下创建index.js、en.js、zh.js
index.js
import Vue from "vue";
// 引入自己的语言包
import chinese from "./zh"; // 中文
import english from "./en"; // 英文
// element ui 国际化
import Element from "element-ui";
import enLocale from "element-ui/lib/locale/lang/en";
import zhLocale from "element-ui/lib/locale/lang/zh-CN";
// 国际化
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
// 配置i18n语言包
const messages = {
en: {
...english,
...enLocale, // 或者用 Object.assign({ message: 'hello' }, enLocale)
},
zh: {
...chinese,
...zhLocale, // 或者用 Object.assign({ message: '你好' }, zhLocale)
},
};
// 国际化配置
const i18n = new VueI18n({
locale: localStorage.getItem("language")
? localStorage.getItem("language")
: "zh", // 默认中文
messages,
silentTranslationWarn: true,
});
// vue配置
Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value),
});
export default i18n;
en.js
export default {
level: "level",
// 路由
router: {
Dashboard: "Dashboard",
},
};
zh.js
export default {
level: "级",
// 路由
router: {
Dashboard: "首页",
},
};
第二步:在main.js中引入
import i18n from "./lang/index";
new Vue({
el: "#app",
i18n,
render: (h) => h(App),
});
第三步:页面内使用
<img :src="$t('Process.Proimg')" style="width: 100%" />
侧边栏显示:
第一步:创建文件utils/i18n.js
import i18n from "@/lang/index";
// 翻译router.meta。标题,用于面包屑侧边栏tagsview
export function generateTitle(title) {
const hasKey = this.$t("router." + title);
if (hasKey) {
// $t :this method from vue-i18n, inject in @/lang/index.js
const translatedTitle = this.$t("router." + title);
return translatedTitle;
}
return title;
}
第二步:修改SidebarItem文件
先引入,然后在method中调用,页面内使用
:title="generateTitle(onlyOneChild.meta.title)"
:title="generateTitle(item.meta.title)"
import { generateTitle } from "@/utils/i18n";
methods: {
generateTitle,
}
<template>
<div v-if="!item.hidden">
<template
v-if="
hasOneShowingChild(item.children, item) &&
(!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
!item.alwaysShow
"
>
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item
:index="resolvePath(onlyOneChild.path)"
:class="{ 'submenu-title-noDropdown': !isNest }"
@click.native="toggleDrawer"
>
<item
:icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
:title="generateTitle(onlyOneChild.meta.title)"
/>
</el-menu-item>
</app-link>
</template>
<el-submenu
v-else
ref="subMenu"
:index="resolvePath(item.path)"
popper-append-to-body
>
<template slot="title">
<item
v-if="item.meta"
:icon="item.meta && item.meta.icon"
:title="generateTitle(item.meta.title)"
/>
</template>
<sidebar-item
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
class="nest-menu"
@click="toggleDrawer"
/>
</el-submenu>
</div>
</template>
<script>
import path from 'path'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'
import FixiOSBug from './FixiOSBug'
import { generateTitle } from "@/utils/i18n";
export default {
name: 'SidebarItem',
components: { Item, AppLink },
mixins: [FixiOSBug],
props: {
// route object
item: {
type: Object,
required: true
},
isNest: {
type: Boolean,
default: false
},
basePath: {
type: String,
default: ''
}
},
data () {
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
// TODO: refactor with render function
this.onlyOneChild = null
return {}
},
methods: {
generateTitle,
hasOneShowingChild (children = [], parent) {
const showingChildren = children.filter(item => {
if (item.hidden) {
return false
} else {
// Temp set(will be used if only has one showing child)
this.onlyOneChild = item
return true
}
})
// When there is only one child router, the child router is displayed by default
if (showingChildren.length === 1) {
return true
}
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
return true
}
return false
},
toggleDrawer () {
this.$store.dispatch('app/toggleDrawer')
},
resolvePath (routePath) {
if (isExternal(routePath)) {
return routePath
}
if (isExternal(this.basePath)) {
return this.basePath
}
return path.resolve(this.basePath, routePath)
}
}
}
</script>
页面内使用路由
<div style="font-size: 18px; font-weight: 600">
{{ generateTitle($route.matched[0].meta.title) }}
</div>
created () {
this.title = this.generateTitle(this.$route.matched[0].meta.title);
},
import { generateTitle } from "@/utils/i18n";
methods: {
generateTitle,
}