vue-antd-admin-skeleton/docs/advance/i18n.md

title	lang
国际化	zn-CN

国际化

vue-antd-admin 采用 vue-i18n 插件来实现国际化，该项目已经内置并且加载好了基础配置。可以直接上手使用。

如果你还没有看快速入门，请先移步查看: 页面 -> i18n国际化配置

菜单国际化（配置路由国际化）

如果你有一个路由是这样的 @/router/config.js

...
{
    path: '/',
    name: '首页',
    component: TabsView,
    redirect: '/login',
    children: [
    {
        path: 'dashboard',
        name: 'Dashboard',
        meta: {
            icon: 'dashboard'
        },
        component: BlankView,
        children: [
        {
            path: 'workplace',
            name: '工作台',
            meta: {
            page: {
                closable: false
            }
            },
            component: () => import('@/pages/dashboard/workplace'),
        },
        {
            path: 'analysis',
            name: '分析页',
            component: () => import('@/pages/dashboard/analysis'),
        }
        ]
    },
}
...

那么你的 @/router/i18n.js 就应该是

module.exports = {
  messages: {
    CN: {
      dashboard: {
        name: 'Dashboard',
        workplace: {name: '工作台'},
        analysis: {name: '分析页'}
    },
    US: {
      dashboard: {
        name: 'Dashboard',
        workplace: {name: 'Workplace'},
        analysis: {name: 'Analysis'}
    },
    HK: {
      dashboard: {
        name: 'Dashboard',
        workplace: {name: '工作台'},
        analysis: {name: '分析頁'}
    },
    // 其他国家 JP ...
  }
}

以 CN(中文) 这个 key 为例，访问 工作台(URL/dashboard/analysis) 就相当于访问 I18n.js 文件的 dashboard.analysis.name 就能定位到菜单的所使用的语言。

// 如:你的访问的路由是 `URL/abc/edf/xxx` 
// @/router/config.js
{
    path: 'abc',
    name: '一级',
    children: [
        {
            path: 'edf',
            name: '二级',
            children: [
            {
                path: 'xxx',
                name: '三级',
            }   
        }
    ]
}
// @/router/i18n.js
{
    CN: {
      abc: {
        name： '一级',
        edf: {
            name： '二级',
            xxx: {
                name: '三级'        
            }
        },
    },
    US: {
      abc: {
        name： 'one',
        edf: {
            name： 'two',
            xxx: {
                name: 'three'        
            }
        },
    },
    // 其他语言
}

小技巧（公有语言包）

项目里面肯定有很多通用或者复用性很高的语言，比如 添加、删除、等共用的语言也可以写到 @/router/i18n.js

// @/router/i18n.js
CN: {
    'add': '添加',
},
US: {
    'add': 'Add',
},
// 其他语言

那么在页面里面就可以直接使用该语言，就无需在 page/你的页面/i18n.js 重复添加。

<template>
  <div>{{ $t('add') }}</div>
</template>
<script>
...
export default {
  ...
  data() {
    return {
        xxx: this.$t('add')
    }
  },
}
</script>

新增一门语言

首先在 @/layouts/header/AdminHeader.vue ，新增一门语言 (多个同理)。

<template>
  ...
</template>
<script>
...
export default {
  ...
  data() {
    return {
      langList: [
        {key: 'CN', name: '简体中文', alias: '简体'},
        {key: 'HK', name: '繁體中文', alias: '繁體'},
        {key: 'US', name: 'English', alias: 'English'},
        // 新增一个语言选项, key是i18n的索引，name是菜单显示名称
        {key: 'JP', name: 'Japanese', alias: 'Japanese'}
      ],
      searchActive: false
    }
  },
}
</script>

TIP: 后续开发建议把这里改成动态配置的方式！

然后开始往 @/router/i18n.js 和 @/pages/你的页面/i18n.js 里面分别添加上语言的翻译。

module.exports = {
    messages: {
        CN: {
            home: {name: '首页'},
        },
        US: {
            home: {name: 'home'},
        },
        HK: {
            home: {name: '首頁'},
        },
        JP: {
            home: {name: '最初のページ'},
        },
    }
}

Notice: 更多用法请移步到 vue-i18n 。