vue3 vue-i18n 多语言

最新推荐文章于 2025-06-12 18:00:19 发布

原创最新推荐文章于 2025-06-12 18:00:19 发布 · 670 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue项目中安装并配置vue-i18n实现多语言支持，包括引入组件、设置默认语言、语言文件结构以及在表单验证和界面切换中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装

npm install vue-i18n -s

2. 引入main.js

import { createI18n } from 'vue-i18n'
import messages from './i18n/index'
const i18n = createI18n({
  legacy: false,
  locale: Cookies.get('language') || 'en_us', // set locale
  fallbackLocale: 'en_us', // set fallback locale
  messages: messages
})
app.use(i18n)

3. 新建文件index.js

import en_us from "@/i18n/en_us.js";
import zh_cn from "@/i18n/zh_cn.js";

export default {
    en_us,
    zh_cn
}

4. 新建文件en_us.js

export default {
    login: {
        username: 'username'
    }
}

5. 新建文件zh_cn.js

export default {
    login: {
        username: '用户名'
    }
}

6. 使用

<script>
import {useI18n} from "vue-i18n";

const {t} = useI18n()

const data = ref({
  rules: {
    label: [{required: true, message: t('login.username'), trigger: "blur"}],
    value: [{required: true, message: t('login.username'), trigger: "blur"}]
  }
});

</script>

<template>
    <div>
        {{ t('login.username') }}
    </div>
</template>

7. 语言切换

<script>
import {useI18n} from 'vue-i18n'
import Cookies from "js-cookie";

const {t, locale} = useI18n()

const handleSetLanguage = (language) => {
  Cookies.set('language', language)
  locale.value = language;
}

</script>


<template>

    <div>
        <el-dropdown @command="handleSetLanguage">
            // 这里去 阿里巴巴矢量图标库 找个图贴一下就行
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :command="'en_us'">English</el-dropdown-item>
                    <el-dropdown-item :command="'zh_cn'">简体中文</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>

</template>

8. 样式