vue3项目中实现国际化语言切换【直接粘贴即可】
使用的插件:vue-i18n
一、安装
npm install vue-i18n
二、引入+全局挂载
import i18n from '@/utils/i18n'
const app = createApp(App);
app.use(i18n);
// 全局挂载 t 函数
app.config.globalProperties.$t = i18n.global.t
三、新建目录
分为三块:组件封装、store封装、配置方法封装
目录位置如下:
组件代码(language/index.vue):
<template>
<div class="language-switcher">
<div v-for="locale in i18nStore.availableLocales" :key="locale.code" class="language-option"
:class="{ active: i18nStore.currentLocale === locale.code }" @click="switchLanguage(locale.code)">
{{ locale.name }}
</div>
</div>
</template>
<script setup>
import { useI18nStore } from '@/store/i18n';
import { onMounted } from 'vue';
const i18nStore = useI18nStore();
const switchLanguage = (locale) => {
i18nStore.setLocale(locale);
};
onMounted(() => {
i18nStore.initLocale()
})
</script>
<style scoped lang="less">
.language-switcher {
display: flex;
font-size: 12px;
margin-left: 10px;
}
.language-option {
padding: 3px 8px;
cursor: pointer;
background-color: #ccc;
}
.language-option.active {
background-color: #32C45D;
color: white;
}
</style>
统一管理代码(store/i18n.js):
import { defineStore } from "pinia";
import { ref } from "vue";
import i18n from "@/utils/i18n";
export const useI18nStore = defineStore("i18n", () => {
// 当前语言
const currentLocale = ref(i18n.global.locale.value);
// 可用的语言列表
const availableLocales = [
{ code: 'zh', name: 'ZH' },
{ code: 'en', name: 'EN' }
];
// 切换语言
const setLocale = (locale) => {
if (availableLocales.some(l => l.code === locale)) {
i18n.global.locale.value = locale;
currentLocale.value = locale;
// 保存到 localStorage,以便下次访问时恢复
localStorage.setItem('locale', locale);
}
};
// 初始化语言(优先使用localStorage存储的语言,其次使用系统语言)
const initLocale = () => {
console.log(navigator,'navigator.language')
// 优先使用localStorage存储的语言
const savedLocale = localStorage.getItem('locale');
// 如果本地有值就更改配置
if (savedLocale && availableLocales.some(l => l.code === savedLocale)) {
setLocale(savedLocale);
return;
}
// 其次使用系统语言
const browserLang = navigator.languages[1];
if (availableLocales.some(l => l.code === browserLang)) {
setLocale(browserLang);
return;
}
// 都没有则使用默认语言
setLocale('zh');
};
return {
currentLocale,
availableLocales,
setLocale,
initLocale
};
});
配置方法封装(utils/i18n/index.js):
// src/i18n.js
import { createI18n } from 'vue-i18n';
import en from './locales/en';
import zh from './locales/zh';
const messages = {
en,
zh
}
const i18n = createI18n({
legacy: false, // 使用 Composition API 模式
locale: 'en', // 默认语言,在store里面统一管理,此配置无用
fallbackLocale: 'en', // 回退语言
messages // 语言包
})
export default i18n;
语言配置:
注意:所有的项目中的涉及到的语言切换的配置,需要在下面的en.js和zh.js中自行定义好,且需要一一对应,否则可能出现切换了不起作用的情况。
中文配置:utils/i18n/locales/en.js
export default {
// 文件上传
upload: {
image: 'Image',
camera: 'Camera',
file: 'Document',
maxFiles: 'You can only upload {count} files at most',
fileSuccess: 'File uploaded successfully',
invalidFileType: 'Please select a valid file type',
fileSizeLimit: 'File size cannot exceed 10MB'
},
// 收藏夹
favorite: {
...
},
}
对应的英文配置:utils/i18n/locales/zh.js
export default {
upload: {
image: '图片',
file: '行程文件',
maxFiles: '最多只能上传{count}个文件',
fileSuccess: '文件上传成功',
invalidFileType: '文件类型不匹配,请重新上传',
fileSizeLimit: '文件大小不能超过10MB'
},
favorite: {
...
}
}
四、使用
### 使用方法 ###
已全局挂载$t:
### vue页面中:
模版和script中直接通过 $t('x.y') 使用
--x:模块名
--y:实际名称
### 纯js文件中:
1、引入:import i18n from "@/utils/i18n";
2、使用:i18n.global.t('upload.image')
### 传变量:
定义:用花括号包裹变量
count: '({count})'
使用:第二个参数用对象包裹
$t('favorite.count', { count: option.count })
### 原因:
$t 是 Vue 组件特有的,i18n.global.t 可以在任何 JavaScript 文件中使用的全局函数。在 store 文件中,应该使用 i18n.global.t 来进行国际化
组件使用案例:
1、纯展示
2、传参展示