Vue3+vite使用i18n国际化

vue3+vite使用i18n国际化

安装i18n

js 复制代码
npm install vue-i18n

创建结构

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

添加语言包

zh.js内容如下

js 复制代码
export default {
    name:"姓名",
    aa:{
        bb:"你好"
    }
}

en.js内容如下

js 复制代码
export default {
    name:"name",
    aa:{
        bb:"hello"
    }
}

融合语言包模块

locales/index.jslanguage/zh.jslanguage/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>
相关推荐
aPurpleBerry19 分钟前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习