vue-i18n +(vue3+element-plus)实现中英文切换
vue-i18n +(vue3+element-plus)实现中英文切换
·
目录
vue3需安装9.x版本的vue-i18n,官方文档目前没有中文版
官方文档: Vue I18n
安装引入
第一步:安装vue-i18n
// npm
npm install vue-i18n@9
// yarn
yarn add vue-i18n@9
第二步: 为了方便统一管理以及后期需在router.js等地方获取当前的语言,
在utils下新建lang文件夹,
在lang文件夹下分别建index.js、en.js、zh.js文件
第三步: 在index.js里,引入vue-i18n,并进行相关配置后导出
index.js
我是将语言记录在localStorage里,所以首次要先去localStorage里取值,没有的话默认是中文
import { createI18n } from 'vue-i18n'
import en from './en' //英文
import zh from './zh' //中文
const i18n = createI18n({
legacy: false, // 使用CompotitionAPI必须添加这条.
locale: localStorage('lang') || 'zh', // set locale设置默认值
fallbackLocale: 'zh', // set fallback locale
messages: {
en,
zh, // set locale messages
},
})
export default i18n
第四步:在main.js里,将vue-i18n注入全局
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store } from './store'
import ElementPlus from 'element-plus'
import i18n from '@/utils/lang'
const app = createApp(App)
app.use(store)
app.use(router)
app.use(ElementPlus)
// 全局注入语言
app.use(i18n)
app.mount('#app')
第五步:设置自动导入,前提是安装了自动导入插件unplugin-auto-import
vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
export default ({ mode }) => {
return defineConfig({
plugins: [
AutoImport({
imports: [
'vue-i18n',
],
dts: './auto-imports.d.ts',
eslintrc: {
enabled: false, // 配置更新时临时设为true,
},
}),
],
resolve: {
alias: {
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
},
},
})
}
到此,vue-i18n就引入成功啦。
使用
1、在zh.js及en.js里添加相应的中英文
2、在组件模板里使用
//基本用法
<div>{{ $t('common.title') }}</div>
//传值用法
<div>{{ $t('common.title2',{date:'2023'}) }}</div>
//zh.js
//title2:'今年是{date}'
//en.js
//title2:'This year is {date}'
3、在setup里使用,以及进行语言切换
t:即组件里使用的$t
local:当下语言
const { t, locale } = useI18n()
const title = ref('测试')
title.value = t('common.title')
// 切换语言
function toggleLang() {
locale.value = locale.value === 'zh' ? 'en' : 'zh'
localStorage.set('lang', locale.value)
}
4、在其他js文件里使用,如:router.js
import { createRouter, createWebHistory } from 'vue-router'
import i18n from '@/utils/lang'
export const routes = [
{
path: '/home',
name: 'home',
component: () => import('@/views/home.vue'),
},
]
const router = createRouter({
history: createWebHistory('/web/'),
routes,
})
router.afterEach((to, form, failure) => {
if (!failure) {
// 更改标签页标题
const { t } = i18n.global
document.title = t(`menu.${to.name}`) || 'page'
}
})
element-plus
在app.vue中引入element多语言
如果是dialog或者popover这种在app.vue之外的,里面有用到element组件的,可将内容用el-config-provider再包裹一遍
<template>
<el-config-provider :locale="locale === 'en' ? en : zhCn">
<router-view />
</el-config-provider>
</template>
<script setup>
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import en from 'element-plus/dist/locale/en.mjs'
const { locale } = useI18n()
</script>
<style lang="scss" scoped></style>
更多推荐
已为社区贡献1条内容
所有评论(0)