[学习笔记] Vue国际化解决方案 vue-i18n + i18n-ally

一、安装vue-i18n

pnpm i vue-i18n --save

二、在src文件夹下创建locales文件夹

1. 结构如下
   • 
2. 其中lang下为各语言翻译文件

// 这是一个zh-cn示例 三文件的结构保持一致 
import type { LocaleMessages } from 'vue-i18n';
const locale: LocaleMessages<any> = {
  message: {
    pageTitle: '中文标题',
  }
};

export default locale;

3. i18n.ts定义了message与t方法

import type { App } from 'vue';
import { createI18n } from 'vue-i18n';
import zhCN from './lang/zh-cn';
import en from './lang/en';
import ja from './lang/ja';

const messages = {
  'zh-CN': zhCN,
  en,
  ja
};
type LocaleKey = keyof typeof messages;

const i18n = createI18n({
  locale: localStorage.getItem('lang') || 'zh-CN',
  fallbackLocale: 'en',
  messages,
  legacy: false
});

// main.ts中使用
export function setupI18n(app: App) {
  app.use(i18n);
}

export function t(key: string) {
  // @ts-ignore 跳过ts检测 否则会报错
  return i18n.global.t(key);
}

// 用于设定在本地存储选择的语言类型
export function setLocale(locale: LocaleKey) {
  i18n.global.locale.value = locale;
  localStorage.setItem('lang', locale)
}

三、使用

1. 在main.ts中调用

import { createApp } from 'vue'
import App from './App.vue'
import { setupI18n } from './locales';
async function setupApp() {
  const app = createApp(App)
  setupI18n(app);
  app.mount('#app');

}
setupApp()

2. 在相关页面使用

<script setup lang="ts">
import { t } from '@/locales';
</script>

<template>
    <span class="text-24 text-white">{{t('message.pageTitle')}}</span>
</template>

3. 切换语言的逻辑
   • 可封装一个下拉框，选择相关语言，触发以下方法

   import { useI18n } from 'vue-i18n';
   const { locale } = useI18n();
   // 当前的语言
   const language = ref<any>(localStorage.getItem('lang') || 'zh-CN');
   // 下拉框使用的Option
   const options = [
     {
       label: '中文',
       key: 'zh-CN'
     },
     {
       label: 'English',
       key: 'en'
     },
     {
       label: '日本語',
       key: 'ja'
     }
   ];
   const handleSelect = (key: string) => {
     language.value = key as any; // 更新切换语言组件当前显示的语言
     locale.value = key; // 关键一步 此处设定后整体页面才会切换语言
     localStorage.setItem('lang', key); // 持久化存储用户选择的语言
   };
   

四、i18n-ally插件的使用

1. 前提
   • 在页面翻译语言多了起来之后，页面会出现很多"t(xxx.xx.xx.xx)", 这不美观也不直观，维护时比较麻烦，而且部分未翻译的也不好排查
   • 我只使用了此插件的文字预览功能，自动翻译功能并没用到，如需要使用此功能请自行百度。
2. 安装插件

   • VS Code插件商店搜索i18 Ally并安装

   • 

3. 配置文件
   • 此时根目录下会新建一个.vscode文件夹，文件夹下有个settings.json文件，可将其中i18-ally相关配置替换为如下代码

    "i18n-ally.displayLanguage": "zh-cn", // 显示用的文字
    "i18n-ally.enabledParsers": ["ts"],
    "i18n-ally.enabledFrameworks": ["vue"],
    "i18n-ally.editor.preferEditor": true,
    "i18n-ally.keystyle": "nested", // 嵌套式json
    "i18n-ally.localesPaths": ["src/locales/lang"],
    "[html][css][less][scss][sass][markdown][yaml][yml][jsonc]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    },
    "i18n-ally.sourceLanguage": "zh-cn", // 翻译源语言
   

   • 重启VS Code

   • 设置预览用语言，如下

   • 

4. 使用
   • 可在原有的t('xxx.xxx.xxx')处看到，已经变为如下显示
   • 
   • 可在VS Code侧边栏检查未翻译的文本
   •