商城后台管理系统 01 Vue-i18n国际化

国际化有三部分要做

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')