当前位置:   article > 正文

Vite+Vue3使用Vue-i18n笔记

Vite+Vue3使用Vue-i18n笔记

一、下载依赖 vue-i18n

在这里插入图片描述

yarn add vue-i18n
  • 1

创建存放语言文件的目录 以及配置文件的配置

我是在src/lang 新建index.ts、cn.ts、en.ts以及test文件夹其中再分别新建cn.ts以及en.ts

/lang/index.ts 用于导出vue-i18n需要的配置对象

import en from "./en.ts";
import zh from "./cn.ts";

const messages = {
  en,
  zh,
};
const language = (
// 读取本地浏览器语言环境中文 zh-CN 英文 eng
  (navigator.language ? navigator.language : navigator.userLanguage) || "zh"
).toLowerCase();
export default {
  fallbackLocale: "zh",
  legacy: false, // composition API
  globalInjection: true, //全局生效$t
  locale: language.split("-")[0] || "zh", // 默认zh翻译
  messages,
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

/src/lang/en.ts 以及同目录下的cn.ts用于收集模块的语言文件并统一提供给Index.ts导出

import test from "./test/en";
export default {
  test,
};
  • 1
  • 2
  • 3
  • 4

/src/lang/cn.ts 以及同目录下的en.ts用于收集模块的语言文件并统一提供给Index.ts导出

import test from "./test/cn";
export default {
  test,
};
  • 1
  • 2
  • 3
  • 4

/src/lang/test/cn.ts

export default {
  h1Title: "这是一个测试文本"
 }
  • 1
  • 2
  • 3

/src/lang/test/en.ts

export default {
  h1Title: "This is a test text"
 }
  • 1
  • 2
  • 3

main.ts中需要对vue-i18n进行引入并使用

import { createApp } from "vue";//必须的依赖
import App from "./App.vue";//必须的依赖
iimport i18nOptionsObj from "./lang/index"; // 1导入vue-i18需要的配置对象
import { createI18n } from "vue-i18n"; // 2 导入创建实例的钩子函数
const app = createApp(App); //必须的依赖

const i18n = createI18n(i18nOptionsObj);// 3.根据配置对象创建实例
app.use(i18n);// 4.挂在到Vue身上
app.config.globalProperties.$t = i18n.global.t;// 5.全局挂载$t翻译方法
app.mount("#app");//必须的步骤
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

组件中使用

模板使用

<template>
<h1>
{{$t("test.h1Title")}}
中文环境====>这是一个测试文本
英文环境====>This is a test text
</h1>
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

js中使用

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
console.log(t("test.h1Title"))
//中文环境输出====>这是一个测试文本
//英文环境输出====>This is a test text
<script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

混合

<script lang="ts" setup>
import {ref} from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const titleMsg1 = ref(t("test.h1Title")) 
const titleMsg2  = ref("test.h1Title") 
<script>
<template>
{{titleMsg1}}
{{$t(titleMsg2)}}
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

语言环境切换

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
locale.value = 'zh' || 'en'
  • 1
  • 2
  • 3
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/79319
推荐阅读
相关标签
  

闽ICP备14008679号