1、vue i18

kazupon.github.io/vue-i18n/zh…

2、基本使用

安装：npm install vue-i18n
创建utils文件->i8n文件 -> lang文件、index.js -> ch.js、en.js（lang文件下面）
ch.js、en.js两个文件中英文要匹配

ch.js中：

const login = {
    username: '登录名',
    password: '密码',
    sport: '运动',
    run: '跑步',
};

const table = {
    date: '日期',
    name: '姓名',
    address: '地址',
};

export { login, table };

en.js中：

const login = {
    username: 'loginName',
    password: 'password',
    sport: 'sport',
    run: 'run',
};

const table = {
    date: 'date',
    name: 'name',
    address: 'address',
};

export { login, table };

index.js为配置文件

import Vue from 'vue';
import VueI18n from 'vue-i18n';
const options = {
    locale: 'ch',
    messages: {
        ch: require('./lang/ch'),
        en: require('./lang/en'),
    },

    silentTranslationWarn: true,
};

Vue.use(VueI18n);
const Li18n = new VueI18n(options);
export default L18n;

main.js中配置、挂在到原型

import i18n from './utils/i18n';
new Vue({
    i18n,
    render: (h) => h(App),
}).$mount('#app');

使用：$t('对象名.key') ：中英切换：可以使用table选项ka

<template>
    <div>
        <el-button @click="login">登录</el-button>
        <br />
        <br />

        <span v-if="lang === 'ch'" @click="changezh">切换为中文</span>
        <span v-else @click="changeen">切换为English</span>
        <el-button>{{ $t('login.username') }}</el-button>
        <br />
        <br />

        <el-button>{{ $t('login.password') }}</el-button>
        <br />
        <br />

        <el-button>{{ $t('login.sport') }}</el-button>
        <br />
        <br />

        <el-button>{{ $t('login.run') }}</el-button>
        <div>{{ $t('table') }}</div>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" :label="$t('table.date')" width="180"> </el-table-column>
            <el-table-column prop="name" :label="$t('table.name')" width="180"> </el-table-column>
            <el-table-column prop="address" :label="$t('table.address')"> </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            lang: 'en',
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄',
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄',
                },
            ],
        };
    },
    methods: {
        login() {
            this.$router.push({
                path: '/main',
                query: { namess: 'liu' },
            });
        },
        changezh() {
            this.lang = 'en';
            this.$i18n.locale = 'ch';
        },
        changeen() {
            this.lang = 'ch';
            this.$i18n.locale = 'en';
        },
    },
};
</script>

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

vue i18n的基础使用

1、vue i18

2、基本使用