Vue 项目中配置i18n 国际化 (带注释)

最新推荐文章于 2025-03-04 16:56:47 发布

我都没吃饱

最新推荐文章于 2025-03-04 16:56:47 发布

阅读量496

点赞数

分类专栏： JavaScript 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Guanchong333/article/details/130661456

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装和使用vue-i18n进行国际化设置。首先通过npm安装，然后创建en.json和zh.json语言包。接着配置vue-i18n实例，导入语言文件。在组件中使用$t方法展示翻译消息，并提供了切换语言的按钮功能，允许用户在英文和中文之间切换。

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

1: 安装 vue-i18n

npm install vue-i18n

2: 创建语言文件

在src目录下新建lang文件夹，en.json为英文语言包，zh.json为中文语言包

文件的格式是这样的

// en.json
export default {
    'name': 'name',
    'user': 'user',
    .....
    
}

// zh.json
export default {
    'name': '姓名',
    'user': '用户',
    .....
}

3: 配置 vue-i18n 实例

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

import zh from './config/zh';
import en from './config/en';

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: require('./locales/en.json'),
    zh: require('./locales/zh.json')
  }
});

export default i18n;

4: 在组件中使用翻译消息

在Vue组件的模板中，使用 $t方法来访问翻译消息，并在页面上显示文本内容：

<template>
  <div>
    <p>{{ $t('name') }}</p>
    <p>{{ $t('user') }}</p>
  </div>
</template>

5: 切换语言

<template>
  <div>
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('zh')">中文</button>
    
    <p>{{ $t('user') }}</p>
    <p>{{ $t('name') }}</p>
  </div>
</template>

methods: {
  switchLanguage(lang) {
    this.$i18n.locale = lang;
  }
}

也可以把状态存到 localStorage 里面这边更加方便