国际化有三部分要做
复制代码
1, vue页面上的国际化----使用 vue-i18n 插件
2，后台接口 国际化
3， 第三方库实现国际化 比如element-ui wangEditor
vue-i18n 官网
复制代码
https://vue-i18n.intlify.dev/guide/installation
1, 介绍
vue I18n是 vue.js 的国际化插件，他可以轻松地将一些本地功能集成到你的vue.js应用程序中。
2, 安装
复制代码
npm install vue-i18n -S
npm install vue-i18n@"*" -S
npm install vue-i18n@8.x -S
vue-i18n@8.28.2: Vue I18n v8.x has reached EOL and is no longer actively maintained. About maintenance status, see https://vue-i18n.intlify.dev/guide/maintenance.html
3, 引入 main.js中全局引入
复制代码
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
4,准备翻译的语言环境信息
复制代码
const i18n = createI18n({
locale: 'ja',
fallbackLocale: 'en',
messages: {
en: { // 英文
home: {
hello: 'hello world',
},
goods: {
home: 'home',
goods: 'Goods Manage',
params: 'Specification parameters'
}
},
zh: { // 中文
home: {
hello: '您好 世界',
},
goods: {
home: '首页',
goods: '商品管理',
params: '规格参数'
}
}
}
})
5,通过选项创建 VueI18n 实例
复制代码
const i18n = new VueI18n({
// locale: 'ja', // 设置地区
locale: 'en', // 设置地区
message, // 设置地址信息
})
6，通过 "i18n" 选项创建vue实例 导出
复制代码
new Vue({i18n}).$mount('#app')
7, 使用语法 调语言包
复制代码
<p>{{ $t("home.hello") }}</p>
8, 实例
使用示例如下
src/lang/index.js
复制代码
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
src/utils/country.js
全世界语言及缩写
复制代码
AA:阿法尔语
FR:法语
LI:林堡语
SE:北萨米语
AB:阿布哈兹语
FY:弗里西亚语
LN:林加拉语
SG:桑戈语
AE:阿维斯陀语
GA:爱尔兰语
LO:老挝语
SH:塞尔维亚-克罗地亚语
AF:南非语
GD:苏格兰盖尔语
LT:立陶宛语
SI:僧加罗语
AK:阿坎语
GL:加利西亚语
LU:卢巴语
SK:斯洛伐克语
AM:阿姆哈拉语
GN:瓜拉尼语
LV:拉脱维亚语
SL:斯洛文尼亚语
AN:阿拉贡语
GU:古吉拉特语
MG:马达加斯加语
SM:萨摩亚语
AR:阿拉伯语
GV:马恩岛语
MH:马绍尔语
SN:绍纳语
AS:阿萨姆语
HA:豪萨语
MI:毛利语
SO:索马里语
AV:阿瓦尔语
HE:希伯来语
MK:马其顿语
SQ:阿尔巴尼亚语
AY:艾马拉语
HI:印地语
ML:马拉亚拉姆语
SR:塞尔维亚语
AZ:阿塞拜疆语
HO:希里莫图语
MN:蒙古语
SS:斯瓦特语
BA:巴什基尔语
HR:克罗地亚语
MO:摩尔达维亚语
ST:南索托语
BE:白俄罗斯语
HT:海地克里奥尔语
MR:马拉提语
SU:巽他语
BG:保加利亚语
HU:匈牙利语
MS:马来语
SV:瑞典语
BH:比哈尔语
HY:亚美尼亚语
MT:马耳他语
SW:斯瓦希里语
BI:比斯拉马语
HZ:赫雷罗语
MY:缅甸语
TA:泰米尔语
BM:班巴拉语
IA:国际语A
NA:瑙鲁语
TE:泰卢固语
BN:孟加拉语
ID:印尼语
NB:书面挪威语
TG:塔吉克语
BO:藏语
IE:国际语E
ND:北恩德贝勒语
TH:泰语
BR:布列塔尼语
IG:伊博语
NE:尼泊尔语
TI:提格里尼亚语
BS:波斯尼亚语
II:四川彝语（诺苏语）
NG:恩敦加语
TK:土库曼语
CA:加泰隆语
IK:依努庇克语
NL:荷兰语
TL:他加禄语
CE:车臣语
IO:伊多语
NN:新挪威语
TN:塞茨瓦纳语
CH:查莫罗语
IS:冰岛语
NO:挪威语
TO:汤加语
CO:科西嘉语
IT:意大利语
NR:南恩德贝勒语
TR:土耳其语
CR:克里语
IU:因纽特语
NV:纳瓦霍语
TS:宗加语
CS:捷克语
JA:日语
NY:尼扬贾语
TT:塔塔尔语
CU:古教会斯拉夫语
JV:爪哇语
OC:奥克语
TW:特威语
CV:楚瓦什语
KA:格鲁吉亚语
OJ:奥吉布瓦语
TY:塔希提语
CY:威尔士语
KG:刚果语
OM:奥洛莫语
UG:维吾尔语
DA:丹麦语
KI:基库尤语
OR:奥利亚语
UK:乌克兰语
DE:德语
KJ:宽亚玛语
OS:奥塞梯语
UR:乌尔都语
DV:迪维希语
KK:哈萨克语
PA:旁遮普语
UZ:乌兹别克语
DZ:不丹语
KL:格陵兰语
PI:巴利语
VE:文达语
EE:埃维语
KM:高棉语
PL:波兰语
VI:越南语
EL:现代希腊语
KN:卡纳达语
PS:普什图语
VO:沃拉普克语
EN:英语
KO:朝鲜语、韩语
PT:葡萄牙语
WA:沃伦语
EO:世界语
KR:卡努里语
QU:凯楚亚语
WO:沃洛夫语
ES:西班牙语
KS:克什米尔语
RM:罗曼什语
XH:科萨语
ET:爱沙尼亚语
KU:库尔德语
RN:基隆迪语
YI:依地语
EU:巴斯克语
KV:科米语
RO:罗马尼亚语
YO:约鲁巴语
FA:波斯语
KW:康沃尔语
RU:俄语
ZA:壮语
FF:富拉语
KY:吉尔吉斯语
RW:卢旺达语
ZH:中文、汉语
FI:芬兰语
LA:拉丁语
SA:梵语
ZU:祖鲁语
FJ:斐济语
LB:卢森堡语
SC:萨丁尼亚语
FO:法罗语
LG:卢干达语
SD:信德语
Vue-i18n国际化 实现代码如下
复制代码
1, src/views/Layout/Content.vue
<template>
<div>
<div class="header">
<i v-if="!isCollapse" @click="changeMenu" class="iconfont icon-right-indent"></i>
<i v-else @click="changeMenu" class="iconfont icon-left-indent"></i>
<div class="header-right">
<el-dropdown @command='clickLang'>
<span class="el-dropdown-link" style="color: #fff;">
选择语言<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command='zh'>中文</el-dropdown-item>
<el-dropdown-item command='en'>English</el-dropdown-item>
<!-- <el-dropdown-item>韩文</el-dropdown-item>
<el-dropdown-item disabled>FR:法语</el-dropdown-item>
<el-dropdown-item divided>LI:林堡语</el-dropdown-item> -->
</el-dropdown-menu>
</el-dropdown>
<div class="user">
欢迎:xx
<span>退出登录</span>
</div>
</div>
</div>
<!-- 右侧内容区域 --左侧 路由出口 -->
<div class="content">
<!-- 路由出口 -->
<router-view />
</div>
</div>
</template>
<script>
export default {
props: ['isCollapse'],
methods: {
changeMenu() {
// 点击切换按钮的时候，修改父组件的数据 isCollapse
this.$emit('changeCollapse')
},
clickLang(command) {
console.log(command);
// console.log(this); // 打印参数
this.$i18n.locale = command; // 切换语言
}
},
};
</script>
<style lang="less" scoped>
.header {
height: 50px;
line-height: 50px;
color: #fff;
background: #1e78bf;
.iconfont {
font-size: 24px;
}
}
.header-right {
display: flex;
float: right;
padding-right: 20px;
.user {
margin-left: 20px;
}
}
</style>
2, src/views/Layout/Mymenu.vue
<template>
<div>
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#545c64"
text-color="#fff" active-text-color="#ffd04b" router :collapse="isCollapse">
<el-menu-item>
<i class="iconfont icon-icon_nav" style="color: skyblue;padding-right: 6px;font-size: 24px;"></i>
<span slot="title">易购后台管理系统</span>
</el-menu-item>
<el-menu-item index="/">
<i class="el-icon-menu"></i>
<span slot="title">{{ $t("menu.home") }}</span>
<!-- <span slot="title">首页</span> -->
</el-menu-item>
<el-menu-item index="/goods">
<i class="el-icon-document"></i>
<span slot="title">{{ $t("menu.goods") }}</span>
<!-- <span slot="title">商品管理</span> -->
</el-menu-item>
<el-menu-item index="/params">
<i class="el-icon-setting"></i>
<span slot="title">{{ $t("menu.params") }}</span>
<!-- <span slot="title">规格参数</span> -->
</el-menu-item>
<el-menu-item index="/advert">
<i class="el-icon-setting"></i>
<span slot="title">广告分类</span>
</el-menu-item>
<el-menu-item index="/my">
<i class="el-icon-setting"></i>
<span slot="title">个人中心</span>
</el-menu-item>
<el-menu-item index="/logistics">
<i class="el-icon-setting"></i>
<span slot="title">物流管理</span>
</el-menu-item>
<el-submenu index="/order">
<template slot="title">
<i class="el-icon-location"></i>
<span>订单管理</span>
</template>
<el-menu-item-group>
<template slot="title">订单</template>
<el-menu-item index="/order/order-list">
<i class="el-icon-document"></i>
<span>订单列表</span>
</el-menu-item>
<el-menu-item index="/order/order-back">
<i class="el-icon-setting"></i>
<span>退货管理</span>
</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="5-3">选项1</el-menu-item>
<el-menu-item index="5-4">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="5-5">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
// 子组件Mymenu接收父组件(index)传递过来的数据
props: ['isCollapse'],
data() {
return {
// isCollapse: false
};
},
};
</script>
<style lang="less" scoped>
.el-menu {
border-right: 0;
.is-active {
background: #1e78bf !important;
color: #fff !important;
}
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
3, src/lang/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 1,准备语言
const messages = {
// 1, 英文
en: {
menu: {
home: 'home',
goods: 'Goods Manage',
params: 'Specification'
}
},
// 2, 中文
zh: {
menu: {
home: '首页',
goods: '商品管理',
params: '规格参数'
}
}
}
// 2, 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
locale: 'zh', // 当前选中的语言
messages, // 语言环境
})
// 导出 i18n
export default i18n
4, main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/plugins/element.js'
import '@/assets/css/reset.css'
import '@/assets/css/iconfont.css'
// 挂载 api
import api from './api/index.js'
Vue.prototype.$api = api;
// 导入语言
import i18n from '@/lang/index.js'
Vue.config.productionTip = false
new Vue({
router,
store,
i18n,
render: function(h) {
return h(App)
}
}).$mount('#app')
