vue-ant-admin中如何使用 i18n.js 国际化文件

Posted 2021-06-12 尔嵘

最近的新闻也是吃的瓜够多，在这里@尔嵘 提醒大家一定要注意安全，时刻保持警惕心，还有人生常态，变化无常，有些事不要太刻意，世界那么大，只有好好活着才能看到未来！

1.路由配置：config.js文件下配置页面路由

import TabsView from '@/layouts/tabs/TabsView'
import BlankView from '@/layouts/BlankView'
import PageView from '@/layouts/PageView'

// 路由配置
const options = {
    routes: [
        {
            path: '/login',
            name: '登录页',
            component: () => import('@/pages/login')
        },
        {
            path: '*',
            name: '404',
            component: () => import('@/pages/exception/404'),
        },
        {
            path: '/403',
            name: '403',
            component: () => import('@/pages/exception/403'),
        },
        {
            path: '/',
            name: '首页',
            component: TabsView,
            redirect: '/login',
            children: [
                {
                    path: 'systemconfig', 
                    name: '系统配置',
                    meta: {
                        icon: 'tags'
                    },
                    component: BlankView,
                    children: [
                        {
                            path: 'userTop',
                            name: "用户管理",
                            meta: {
                                icon: 'user',
                                page: {
                                    closable: true
                                }
                            },
                            component: () => import('@/pages/systemconfig/userManage')
                        },  
                    ]
                },
            ]
        },
    ]
}

export default options

2.i18n.js：

配置你要设置的国际化变量，CN代表简体，HK代表繁体，US代表英语

module.exports = {
    messages: {
        CN: {
            sname: '要查询用户名称',
        },
        HK: {
            sname: '要查詢用戶名稱',
        },
        US: {
            sname: 'To query the user name',
        }
    }
};

3.组件引入并使用：

<template>
    <div>
        <a-input :placeholder="$t('sname')" />
    </div>
</template>

<script>
    import debounce from 'lodash/debounce'
    import moment from 'moment';
    import mixinViewModule from '@/mixins/view-module'

    export default {
        name: 'userManage',
        mixins: [mixinViewModule],
        i18n: require('./i18n'),//引入
        data() {
            return {
                
            }
        },

        components: {

        },

        methods: {
        
        }
    }
</script>

<style lang="less" scoped>
   
</style>

最后送大家曾国藩的一句话：“未来不迎，当时不杂，过往不恋”，活好当下，做自己想做的事情，如果野心太大那就多学点知识储备，脚踏实地、洒脱快乐地过好每一天。