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>
相关推荐
Myli_ing几秒前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风3 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave10 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟12 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾33 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧42 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng18401 小时前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架