Vue+Element+i18n 使用指南

2023-11-21 17:24:30

用 Element UI 和 Vue-i18n 在 Vue.js 中构建国际化和本地化应用

在现代 Web 开发中，构建支持多种语言的应用至关重要，以满足全球受众的需求。Vue.js 框架和 Element UI 库是构建响应式、现代化 Web 应用的强大工具。i18n 插件则允许您轻松实现国际化和本地化。

安装依赖项

首先，使用以下命令安装 Vue.js 框架：

npm install vue

然后，安装 Element UI 库：

npm install element-ui

最后，安装 i18n 插件：

npm install vue-i18n

按需引入 Element UI

在 main.js 文件中，按需引入 Element UI 的组件：

import { Button, Input } from 'element-ui';

Vue.use(Button);
Vue.use(Input);

引入 Vue-i18n

在 main.js 文件中，引入 Vue-i18n：

import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

创建语言包

在 src/lang 文件夹下创建两个语言包，例如 en.js 和 zh-CN.js。

// en.js
export default {
  message: {
    hello: 'Hello, world!'
  }
};

// zh-CN.js
export default {
  message: {
    hello: '你好，世界！'
  }
};

创建 i18n 实例

在 main.js 文件中，创建 i18n 实例：

import VueI18n from 'vue-i18n';
import en from './lang/en.js';
import zhCN from './lang/zh-CN.js';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  messages: {
    en,
    'zh-CN': zhCN
  }
});

使用 i18n

在 Vue 组件中，可以使用 $t 方法来获取翻译后的文本：

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      locale: 'en'
    };
  },
  computed: {
    localeMessage() {
      return this.$t('message');
    }
  }
};
</script>