Vue3后台管理系统（六）i18n国际化

目录

一、安装 vue-i18n

二、语言包

三、全局注册

四、别名配置

五、静态页面国际化

六、动态路由国际化

一、安装 vue-i18n

npm install vue-i18n@9.1.9

二、语言包

创建 src/lang 语言包目录，中文语言包 zh-cn.ts，英文语言包 en.ts，和index.ts

// src/lang/en.ts
export default {
  // 路由国际化
  route: {
    dashboard: 'Dashboard',
    document: 'Document'
  },
  // 登录页面国际化
  login: {
    title: 'vue3-element-admin',
    username: 'Username',
    password: 'Password',
    login: 'Login',
    code: 'Verification Code',
    copyright: '',
    icp: '',
    thirdPartyLogin: 'third-party login'
  },
  // 导航栏国际化
  navbar: {
    dashboard: 'Dashboard',
    logout: 'Logout',
    document: 'Document',
    gitee: 'Gitee'
  }
};

// src/lang/zh-cn.ts
export default {
  // 路由国际化
  route: {
    dashboard: '首页',
    document: '项目文档'
  },
  // 登录页面国际化
  login: {
    title: 'vue3-element-admin',
    username: '用户名',
    password: '密码',
    login: '登 录',
    code: '请输入验证码',
    copyright: '',
    icp: '',
    thirdPartyLogin: '第三方登录'
  },
  navbar: {
    dashboard: '首页',
    logout: '注销',
    document: '项目文档',
    gitee: '码云'
  }
};

// src/lang/index.ts
// 自定义国际化配置
import { createI18n } from 'vue-i18n';
import { localStorage } from '@/utils/localStorage';

// 本地语言包
import enLocale from './en';
import zhCnLocale from './zh-cn';

const messages = {
  'zh-cn': {
    ...zhCnLocale
  },
  en: {
    ...enLocale
  }
};

/**
 * 获取当前系统使用语言字符串
 *
 * @returns zh-cn|en ...
 */
export const getLanguage = () => {
  // 本地缓存获取
  let language = localStorage.get('language');
  if (language) {
    return language;
  }
  // 浏览器使用语言
  language = navigator.language.toLowerCase();
  const locales = Object.keys(messages);
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale;
    }
  }
  return 'zh-cn';
};

const i18n = createI18n({
  legacy: false,
  locale: getLanguage(),
  globalInjection: true,
  messages: messages
});

export default i18n;

三、全局注册

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

import i18n from "@/lang/index";

const app = createApp(App);
app
    .use(i18n)
    .mount('#app')

四、别名配置

 修改vite.config.ts文件

alias: {
         "@": path.resolve("./src"), // 相对路径别名配置，使用 @ 代替 src
         'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
       }

五、静态页面国际化

六、动态路由国际化

在src/utils文件夹下新建i18n.ts文件，内容如下

//  src/utils/i18n.ts
import i18n from "@/lang/index";

export function generateTitle(title: any) {
    // 判断是否存在国际化配置，如果没有原生返回
    const hasKey = i18n.global.te('route.' + title)
    if (hasKey) {
        const translatedTitle = i18n.global.t('route.' + title)
        return translatedTitle
    }
    return title
}

<script setup lang="ts">
import {generateTitle} from '@/utils/i18n'
</script>    

<template>
 	<a @click.prevent="handleLink(item)">
       {{ generateTitle(item.meta.title) }}
    </a>
</template>