Vue3 多语言

发布时间:2024年01月10日

1.下载依赖

# npm
# npm install vue-i18n@9 -S

# yarn
yarn add vue-i18n@9

2. 配置文件目录

  1. src目录下新建lang文件夹
    目录内容如下:
    -src
    –lang
  2. lang文件夹下新建index.jszh.jsen.js
    目录内容如下:
    -src
    –lang
    —index.js
    —zh.js
    —en.js

3. 编写代码

3.1 js版本

zh.js:

export default {
  "title": "标题",
};

en.js:

export default {
  "title": "title",
};

index.js

import { createI18n } from "vue-i18n";
import zh from "./zh";
import en from "./en";

// 可优化点: 使用cookie存储用户选择的语言,第二次进来读取cookie

const i18n = createI18n({
 locale: "zh", // 定义默认语言为中文
  legacy: false, //表示不使用旧版 Vue I18n 的模式。
  globalInjection: true, // 表示将国际化实例注入到全局属性中,这样在组件中可以直接访问到 $i18n 对象。
  messages: {
    zh,
    en,
  },
});

export default i18n;

main.js:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import i18n from "./lang";

const app = createApp(App);

app.use(i18n);

app.mount('#app');

使用:

<script setup>
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();

const changeLang = (value: string) => {
  locale.value = value;
};

// 使用计算属性实现响应式
const title = computed(() => t("title"));

const changeLang = (value: string) => {
  locale.value = value;
};
</script>

<template>
  <button type="button" @click="changeLang('zh')">点击切换中文</button>
  <button type="button" @click="changeLang('en')">点击切换英文</button>
  <h2>{{ $t("title") }}</h2>
  <h2>{{ title }}</h2>
</template>

<style scoped>
</style>

3.2 ts 版本:

zh.js:

export default {
  "title": "标题",
};

en.js:

export default {
  "title": "title",
};

index.js

import { createI18n } from "vue-i18n";
import zh from "./zh";
import en from "./en";

// 可优化点: 使用cookie存储用户选择的语言,第二次进来读取cookie

const i18n = createI18n({
 locale: "zh", // 定义默认语言为中文
  legacy: false, //表示不使用旧版 Vue I18n 的模式。
  globalInjection: true, // 表示将国际化实例注入到全局属性中,这样在组件中可以直接访问到 $i18n 对象。
  messages: {
    zh,
    en,
  },
});

export default i18n;

main.js:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import i18n from "./lang";

const app = createApp(App);

app.use(i18n);

app.mount('#app');

使用:

<script setup lang="ts">
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();

const changeLang = (value: string) => {
  locale.value = value;
};

// 使用计算属性实现响应式
const title = computed(() => t("title"));

const changeLang = (value: string) => {
  locale.value = value;
};
</script>

<template>
  <button type="button" @click="changeLang('zh')">点击切换中文</button>
  <button type="button" @click="changeLang('en')">点击切换英文</button>
  <h2>{{ $t("title") }}</h2>
  <h2>{{ title }}</h2>
</template>

<style scoped>
</style>

4. 修改 $t 为 t

如果不想用$t来进行中英文切换,那么可以在组件内这么做:

$t 是全局自带
t 是组件内使用

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
// 多语音
import { useI18n } from "vue-i18n";
// 通过 实例化出来的 t 进行中英文切换
const { locale, t } = useI18n();
</script>

<template>
    <p>我是t展示的翻译--{{ t('name') }}</p>
</template>
文章来源:https://blog.csdn.net/wu_2004/article/details/135512389
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。