如何使用Vue实现多语言和国际化？-Vue.js-PHP中文网

如何使用Vue实现多语言和国际化？

WBOY

发布： 2023-06-27 21:39:40

原创

3160人浏览过

随着全球化的发展，多语言和国际化越来越成为一个网站或应用的必要功能之一。vue作为一款流行的前端框架，在这方面也有着灵活的解决方案。本文将介绍如何使用vue实现多语言和国际化。

一、安装Vue-i18n

Vue-i18n是Vue.js的国际化插件，可以帮助我们实现多语言和国际化。首先需要在项目中安装Vue-i18n。

npm install vue-i18n --save

登录后复制

二、创建语言文件

在项目中创建一个i18n文件夹，用于存放语言文件。

立即学习“前端免费学习笔记（深入）”；

在i18n文件夹中创建一个名为index.js的文件，用于配置Vue-i18n。

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认使用英文
  messages: {
    en: require('./en.json'),
    zh: require('./zh.json'),
  },
});

export default i18n;

登录后复制

上述代码中，locale表示当前使用的语言，默认使用英文。messages表示使用的语言文件，这里分别引入了en.json（英文）和zh.json（中文）。

现在可以在i18n文件夹中创建en.json和zh.json文件，并编写语言内容。

en.json

{
  "hello": "Hello",
  "world": "World",
  "welcome": "Welcome"
}

登录后复制

zh.json

{
  "hello": "你好",
  "world": "世界",
  "welcome": "欢迎"
}

登录后复制

三、使用Vue-i18n

在组件中使用Vue-i18n非常简单，只需要在模板中添加$tc（翻译）或$t（格式化）即可。

<template>
  <div>
    <p>{{ $t('hello') }}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10513">
                            <img src="https://img.php.cn/upload/webcode/000/000/010/176249700397976.jpg" alt="网奇英文商城外贸系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10513">网奇英文商城外贸系统</a>
                            <p>网奇Eshop是一个带有国际化语言支持的系统，可以同时在一个页面上显示全球任何一种语言而没有任何障碍、任何乱码。在本系统中您可以发现，后台可以用任意一种语言对前台进行管理、录入而没有阻碍。而任何一个国家的浏览者也可以用他们的本国语言在你的网站上下订单、留言。用户可以通过后台随意设定软件语言，也就是说你可以用本软件开设简体中文、繁体中文与英文或者其他语言的网上商店。网奇Eshop系统全部版本都使用模</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="网奇英文商城外贸系统">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10513" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="网奇英文商城外贸系统">
                        </a>
                    </div>
                
    <p>{{ $tc('world', 1) }}</p>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import i18n from '@/i18n';

export default {
  computed: {
    greeting() {
      return this.$t('welcome', { name: 'Vue' });
    },
  },
  created() {
    // 设置语言为中文
    i18n.locale = 'zh';
  },
};
</script>

登录后复制

上述代码中，$t和$tc都可以用于翻译，区别在于$t可以进行格式化，$tc可以根据参数进行复数化。这里还演示了computed属性中使用$t方法，以及在组件created生命周期中修改语言。

四、使用Vue CLI插件

Vue CLI提供了官方插件vue-cli-plugin-i18n，可以快速集成多语言和国际化。

首先需要安装插件。

vue add i18n

登录后复制

安装成功后，会在项目中生成locales文件夹，用于存放语言文件。

修改src/i18n.js文件。

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages() {
  const locales = require.context('@/locales', true, /[A-Za-z0-9-_,s]+.json$/i);
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
  silentFallbackWarn: true,
});

登录后复制

上述代码中，loadLocaleMessages函数用于自动加载locales文件夹中的语言文件，并返回messages对象。此外，还可以通过环境变量VUE_APP_I18N_LOCALE和VUE_APP_I18N_FALLBACK_LOCALE设置默认语言和回退语言。

在组件中使用$te方法判断键值是否存在，$d方法进行日期格式化。

<template>
  <div>
    <p v-if="$te('hello')">Hello</p>
    <p>{{ $d(new Date(), 'short') }}</p>
  </div>
</template>

<script>
export default {};
</script>

登录后复制

以上就是使用Vue实现多语言和国际化的基本方法。通过Vue-i18n插件或Vue CLI插件，可以轻松实现多语言和国际化功能，让网站或应用更加符合全球化的趋势。

以上就是如何使用Vue实现多语言和国际化？的详细内容，更多请关注php中文网其它相关文章！