Vue3 多语言

1.下载依赖

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

# yarn
yarn add vue-i18n@9
1
2
3
4
5

2. 配置文件目录

1. src目录下新建lang文件夹
   目录内容如下：
   -src
   –lang
2. 在lang文件夹下新建index.js、zh.js、en.js
   目录内容如下：
   -src
   –lang
   —index.js
   —zh.js
   —en.js

3. 编写代码

3.1 js版本

zh.js:

export default {
  "title": "标题",
};
1
2
3

en.js:

export default {
  "title": "title",
};
1
2
3

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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');
1
2
3
4
5
6
7
8
9
10
11

使用：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3.2 ts 版本：

zh.js:

export default {
  "title": "标题",
};
1
2
3

en.js:

export default {
  "title": "title",
};
1
2
3

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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');
1
2
3
4
5
6
7
8
9
10
11

使用：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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>
1
2
3
4
5
6
7
8
9
10
11