vue3+vite使用i18n国际化
安装i18n
js
npm install vue-i18n
创建结构
- 在
src
下面新建locales
文件夹 - 在
locales
文件夹内新建index.js
文件和language
文件夹 - 在
language
文件夹内新建zh.js
和en.js
添加语言包
zh.js
内容如下
js
export default {
name:"姓名",
aa:{
bb:"你好"
}
}
en.js
内容如下
js
export default {
name:"name",
aa:{
bb:"hello"
}
}
融合语言包模块
在locales/index.js
将language/zh.js
和language/en.js
添加到语言包
locales/index.js
内容如下
js
import { createI18n } from "vue-i18n";
import zh from "./language/zh";
import en from "./language/en";
const i18n = createI18n({
legacy: false, // 默认使用 composition API,不启用旧版的 API 兼容模式,是 vue-i18n v9 引入的,为了更好地与 Vue 3 的设计理念保持一致。使用 Composition API 可以提供更灵活的代码组织和更好的类型支持。
locale: "zh", // 当前使用的语言
fallbackLocale: "zh", // 找不到对应的语言时,使用 fallbackLocale对应的语言
messages:{
zh, // 提供的中文语言
en, // 提供的英文语言
},
});
export default i18n; // 导出
在main.js
进行注册
js
import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/assets/fonts/font.css'
import * as echarts from 'echarts';
import router from "./router/index.js";
import { createPinia } from "pinia";
// 一:引入i18n
import i18n from "./locales/index.js";
window.echarts = echarts;
const pinia = createPinia();
// 二:注册i18n
// 这里注册i18n记得一个小坑,例如下面这种,前面如果有路由模块/UI组件模块/pinia这种全局共享模块的,将i18n放到最后注册,否则会报错(反正我是报错了,放到最后面注册就没事了)
createApp(App).use(pinia).use(router).use(ElementPlus).use(i18n).mount("#app");
在页面内使用
js
<script setup>
import { ref, reactive } from 'vue';
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
const zlLengedTxtOne = ref(t("name"));
const zlLengedTxtTwo= ref(t("aa.bb"));
console.log('zlLengedTxtOne',zlLengedTxtOne.value) // 中文显示姓名,英文显示name
console.log('zlLengedTxtTwo',zlLengedTxtTwo.value) // 中文显示你好,英文显示hello
</script>
<template>
<div style="text-align: center;margin-top: 200px;">
<!-- 中文显示姓名,英文显示name -->
{{ $t("name") }}
<br>
<!-- 中文显示你好,英文显示hello -->
{{ $t("aa.bb") }}
</div>
</template>
<style scoped lang="scss">
</style>
切换语言包
js
<script setup>
import { ref, reactive } from 'vue';
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
const zlLengedTxtOne = ref(t("name"));
const zlLengedTxtTwo= ref(t("aa.bb"));
// 可以通过locale切换语言包
locale.value = 'zh'; // 切换为中文
console.log('zlLengedTxtOne',zlLengedTxtOne.value) // 中文显示姓名,英文显示name
console.log('zlLengedTxtTwo',zlLengedTxtTwo.value) // 中文显示你好,英文显示hello
</script>
<template>
<div style="text-align: center;margin-top: 200px;">
<!-- 中文显示姓名,英文显示name -->
{{ $t("name") }}
<br>
<!-- 中文显示你好,英文显示hello -->
{{ $t("aa.bb") }}
</div>
</template>
<style scoped lang="scss">
</style>