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

叁歲伎倆 2024-03-26 12:06 56阅读 0赞

**目录**

一、安装 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'
           }

![74b8628ae7a04a3f835f6e0e4f64408d.png][]

#### 五、静态页面国际化 ####

![6a55d7a29bb74b47b0debb3523e28357.png][]

#### 六、**动态路由国际化** ####

在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
    }

[74b8628ae7a04a3f835f6e0e4f64408d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8cded253c9be4d75827c72a0b6667166.png
[6a55d7a29bb74b47b0debb3523e28357.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8a23b90498544692903b4bcd41a490d2.png