vue多语言化_vue 智能语言-CSDN博客

随着国际化的趋势，项目中配置多语言切换也越来越有必要，本篇文章将会介绍如何在vue项目中配置多语言化

安装：
```
npm i vue-i18n
```

导入注册：(因为后续可能涉及很多配置翻译，所以我们提前把配置抽离为单独的文件)

// src/plugins/VueI18n/index.js：
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

// 定义各语言的配置
const messages = {
    zn: {
        message: {
            hello: '你好，世界',
        },
        name: '可乐',
    },
    en: {
        message: {
            hello: 'hello world',
        },
        name: 'cola',
    },
    ja: {
        message: {
            hello: 'こんにちは、世界',
        },
        name: 'コーラ',
    },
};

// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
    locale: 'zn', // 设置默认地区
    messages, // 设置配置信息
});

export default i18n;

vue实例绑定i18n：

// src/main.js
import i18n from './plugins/VueI18n/index';

new Vue({
    router,
    store,
    i18n,
    render: h => h(App),
}).$mount('#app');

vue文件中使用(插值表达式使用 $t )：
可以提前配置好语言数组，通过切换时，改变 $i18n.locale 时区，即可做到语言切换（chooesLange方法）
插值表达式使用 $t(‘xx’) 写法，xx即为messages配置中的字段

<template>
    <div class="about">
        <h1>{{ $t('message.hello') }}</h1>
        <h1>{{ $t('name') }}</h1>
        
        <div class="mt-6">
            <p @click="isChoose = true" style="cursor:point">请选择语言</p>
            <ul v-if="isChoose">
                <li v-for="(item, index) in languages" :key="index" @click="chooesLange(item[0])">{{ item[1] }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            languages: new Map([
                ['zn', '中文'],
                ['en', 'English'],
                ['ja', '日本语'],
            ]),
            isChoose: false,
        };
    },
    methods: {
        chooesLange(languageItem) {
            this.$i18n.locale = languageItem;
            this.isChoose = false;
        },
    },
};
</script>

<style scoped>
p,
ul {
    cursor: pointer;
}
</style>