前言
- 发布notion-rss图形化后，评论中有网友希望写一个中文版的界面，所以看了一下vuetifyjs的国际化，主要使用vue-i18n扩展实现。
安装vue-i18n
➜ ~ yarn add vue-i18n@9
设置vue-i18n适配器
- 搜索找了一圈，发现只有在他的介绍features才讲了一下i18n，首先在
createVuetify方法中加入locale的设置，创建vue-i18n的适配器，zhHans和en两个是我自定义的中英对照翻译。
+ import zhHans from "./../locales/zh";
+ import en from "./../locales/en";
// Composables
import { createVuetify } from "vuetify";
+ import { createVueI18nAdapter } from "vuetify/locale/adapters/vue-i18n";
+ import { createI18n, useI18n } from "vue-i18n";
+ export const i18n = new createI18n({
+ legacy: false, // Vuetify does not support the legacy mode of vue-i18n
+ locale: "en",
+ fallbackLocale: "en",
+ messages: { zhHans, en },
+ });
// <https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides>
export const vuetify = createVuetify({
+ locale: {
+ adapter: createVueI18nAdapter({ i18n, useI18n }),
+ },
theme: {
themes: {
light: {
colors: {
primary: "#1867C0",
secondary: "#5CBBF6",
},
},
},
},
});
locale，默认为英文，可选有：zhHans, en两种语言。
加载适配器
- import vuetify from './vuetify'
+ import {vuetify,i18n} from './vuetify'
export function registerPlugins (app) {
app.use(vuetify)
+ app.use(i18n)
}
添加翻译文件
- 从
vuetify/locale导一份默认组件的翻译，不然会提示找不到vuetify内置的对应关系，下面就是汉语中文的翻译对应关系，参考了基于组件的本地化，以组件作为区分，同理英文那个文件也是一样，只不过导入的是内置的英文对应的。
import { zhHans } from "vuetify/locale";
export default {
$vuetify: { ...zhHans },
btn: {
close: "关闭",
save: "保存",
yes: "是",
no: "否",
copy: "复制",
update: "更新",
add: "添加",
import: "导入",
update_app: "更新应用",
reset:"重置"
},
tab: {
setting: "Notion设置",
tools: "工具",
},
label: {
source_id: "订阅源的数据库ID",
notion_token: "Notion集成API的Token",
archive_id: "文章归档的数据库ID",
proxy: "代理",
api_server_enabled: "是否开启API服务",
api_server: "API的监听地址和监听端口",
token: "API服务的Token",
feed_file: "选择一个OPML文件",
daemon: "是否后台运行：",
language:"语言"
},
tooltip: {
rsshub: "复制到RssHub浏览器插件",
add_feed: "添加订阅源",
import_feed: "从文件中导入订阅源",
},
text: {
importing: "导入进度：",
restart_app: "是否重新打开应用? ",
is_restart_app: "修改设置后必须重新启动应用才可以生效。",
},
};
翻译
- 初始化翻译指令，也是在下面组件中使用到的
$vuetify.locale.t
import { useLocale } from "vuetify";
setup() {
const { t } = useLocale();
return {
t,
};
},
<v-tab value="setting">
<v-icon start> mdi-tune </v-icon>
- Setting
+ {{ $vuetify.locale.t("tab.setting") }}
</v-tab>
<v-tab value="tools">
<v-icon start> mdi-hammer-screwdriver </v-icon>
- Tools
+ {{ $vuetify.locale.t("tab.tools") }}
</v-tab>
修改本地语言
- 如果用户想切换当前语言，应该有一个选项可以选择，好像大家都是有菜单下拉选择框做的，我这没有菜单，所以就放在工具那一栏了，反正那位置还有很多空白。先添加一个下拉选择框，当用户修改值之后就改变当前本地语言。
<v-row>
<v-col cols="4">
<v-select
v-model="lang"
@update:model-value="changeLocale"
prepend-icon="mdi-translate"
:label="$vuetify.locale.t('label.language')"
:items="['en', 'zhHans']"
variant="solo"
></v-select>
</v-col>
</v-row>
- 然后下面的是
changeLocale，修改当前本地语言的函数，并且将设置保存到localStorage，持久化。
data() {
return {
lang: window.localStorage.getItem("lang") || "en",
...
}
},
methods: {
changeLocale(locale) {
this.$vuetify.locale.current = locale;
window.localStorage.setItem("lang", locale);
},
}
效果
参考