1.下载依赖
# npm
# npm install vue-i18n@9 -S
# yarn
yarn add vue-i18n@9
2. 配置文件目录
src
目录下新建lang
文件夹
目录内容如下:
-src
–lang- 在
lang
文件夹下新建index.js
、zh.js
、en.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>