第一步：创建文件夹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.jsconst 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"><templatev-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-submenuv-elseref="subMenu":index="resolvePath(item.path)"popper-append-to-body><template slot="title"><itemv-if="item.meta":icon="item.meta && item.meta.icon":title="generateTitle(item.meta.title)"/></template><sidebar-itemv-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 objectitem: {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 functionthis.onlyOneChild = nullreturn {}},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 = itemreturn true}})// When there is only one child router, the child router is displayed by defaultif (showingChildren.length === 1) {return true}// Show parent if there are no child router to displayif (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,
}
)
