当前位置：首页 > article >正文

Vue3+vite使用i18n国际化

article 2024/11/18 4:18:49

vue3+vite使用i18n国际化

安装i18n

npm install vue-i18n

创建结构

在src下面新建locales文件夹
在locales文件夹内新建index.js文件和language文件夹
在language文件夹内新建zh.js和en.js

添加语言包

zh.js内容如下

export default {
    name:"姓名",
    aa:{
        bb:"你好"
    }
}

en.js内容如下

export default {
    name:"name",
    aa:{
        bb:"hello"
    }
}

融合语言包模块

在locales/index.js将language/zh.js和language/en.js添加到语言包

locales/index.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`进行注册

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");

在页面内使用

<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>

切换语言包

<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>