vue3
使用的国际化库为:i18n
安装方式:
npm install vue-i18n@next
安装完成后在src
文件夹下新建lang
文件夹
在lang
文件夹下新建需要语言转换的文件夹,这里以中文zh
和英文en
举例,在这两个文件夹下新建需要转换的语言
在zh
的index.ts
中写好我们需要转换的语言
en
的index.ts
也是一样的
在lang
文件夹下新建index.ts
文件,在该文件下引入刚才的建立的语言包,配置需要使用的默认语言
// lang -> index.ts
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'
/* 这里必须是messages名称 */
const messages = {
'zh-US' : zh,
'en-US' : en
}
const i18n = createI18n({
legacy: false, // 使用 Composition API 模式,则需要将其设置为false
globalInjection: true, //全局生效$t
locale: 'zh-US', // 默认使用的语言
messages, // 使用数据源
})
export { i18n }
在main.ts
文件下导入并挂载i18n
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router/index";
// 引入国际化
import { i18n } from './lang/index'
const app = createApp(App)
/* globalProperties一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。 */
app.config.globalProperties.$i18n = i18n;
app
.use(router)
.use(i18n) // 挂载i18n
.mount("#app")
main
文件设置好后,我们就可以在页面使用了,页面的使用方法:
<div>
<el-switch
v-model="lang"
inline-prompt
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #97a0ff"
active-text="中"
inactive-text="英"
@change="languageChange"
/>
<!-- 在页面中使用,这里对应的是语言包中的对象,此处可以使用模板字符串 -->
<span>{{ t('navUtil.loginText') }}</span>
</div>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const lang = ref(true); // 开关,语言状态切换
/* getCurrentInstance()可以用来获取当前组件实例 */
let current = getCurrentInstance()?.appContext.config.globalProperties as any;
// 根据状态,切换国际化
const languageChange = (val : boolean) => {
// false英 true中,此处的zh-US就是lang -> index.ts -> messages对象的键名
val ? current.$i18n.locale = 'zh-US' : current.$i18n.locale = 'en-US'
}
如果是后台返回的菜单数据,我们需要根据菜单数据的键做语言处理,例如这样的
首先需要在lang
对应的中英文文件夹下新增语言配置,由于后台返回的键名都是一样的,我们可以使用 键+id
的方法让这些键保持独立,例如:
菜单一般都是遍历出来的,在页面中用模板字符串拼接id即可
<span>{{ t(`menu.authName${item.id}`) }}</span>
如果觉得这篇文章对你有帮助,欢迎点赞👍、收藏💖、转发✨哦~