如何实现国际化处理
这个未来如果你们公司在跨国公司一般都要做国际化处理。就把页面中的信息保存两份语言，一个zh-cn.js和en.js。然后把平台中所有的你能看文本，菜单，按钮，提示等等，都会存两份。然后通过vue-i18n组件就实现国际化切换。
1：安装
npm install vue-i18n
yarn add vue-i18n
pnpm install vue-i18n
2: 在src下新建一个i18n/lang文件夹，然后在这里定义en.js和zh.js
en.js
export default {
ksdAdminManage: 'ksdAdminManage',
loginButton: 'Login'
}
zh.js
export default {
ksdAdminManage: 'KVA后台管理',
loginButton: '登录'
}
3: 在src/i18n新建一个index.js 用来初始化国际化的配置信息
// 国际化组件
import { createI18n } from 'vue-i18n'
// 保存语言切换。 Cookies是本地存储技术
import Cookies from 'js-cookie'
// 导入中文和英文国际化文件
import zhLocale from './lang/zh.js'
import enLocale from './lang/en.js'
// 初始国际化组件的实例
const i18n = createI18n({
legacy:false,
fallbackLocale:'zh',
locale: Cookies.get("ksd-kva-language") || 'zh-cn', // 设置地区
messages: {
en: {
...enLocale,
},
'zh-cn': {
...zhLocale
}
}
})
export default i18n
4： 在main.js中进行注册
import App from './App.vue'
import i18n from '@/i18n'
const app = createApp(App)
app.use(i18n)
app.mount('#app')
5: 如何使用国际化
import { useI18n } from 'vue-i18n'
const { locale, t } = useI18n()
<div>{{ t('ksdAdminManage') }}</div>
<div>{{ t('loginButton') }}</div>
<hr>
<div>{{ useI18n().t('welcome') }}</div>
<hr>
<div>{{ useI18n().t('login.userName') }}</div>
<div>{{ useI18n().t('login.pwd') }}</div>
<hr>
6: 如何实现国际化切换
安装cookie
npm install js-cookie
yarn add js-cookie
pnpm install js-cookie
使用
<template>
<button @click="handleChangeLang('zh-cn')">切换成中文</button>
<button @click="handleChangeLang('en')">切换成英文</button>
</template>
<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
const { locale, t } = useI18n()
import Cookies from 'js-cookie'
// 语言切换
const handleChangeLang = (lang)=>{
locale.value = lang
Cookies.set("ksd-kva-language",lang)
}
</script>
也可以使用localStorage来替代cookie
