nuxt vuei18n 配置|极客教程

nuxt vuei18n 配置

在前端开发中，经常会涉及到多语言支持的需求。Nuxt.js作为一个基于Vue.js的服务端渲染框架，提供了对国际化的良好支持。本文将详细介绍在Nuxt.js项目中如何配置和使用vue-i18n来实现多语言支持。

1. 安装vue-i18n

在开始之前，首先需要安装vue-i18n这个插件。可以通过npm或yarn来进行安装：

npm install vue-i18n
# 或者
yarn add vue-i18n

2. 配置vue-i18n

接下来，在Nuxt.js项目中进行vue-i18n的配置。在plugins文件夹下新建一个i18n.js文件，用来配置vue-i18n。

// plugins/i18n.js

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

Vue.use(VueI18n);

export default ({ app, store }) => {
  // Set i18n instance on app
  // This way we can use it in middleware and pages asyncData/fetch
  app.i18n = new VueI18n({
    locale: 'en',
    fallbackLocale: 'en',
    messages: {
      en: require('~/locales/en.json'),
      zh: require('~/locales/zh.json')
    }
  });
};

在上面的配置中，我们指定了默认的语言为英文(en)，并且提供了英文和中文的语言包，分别对应en.json和zh.json。在locales文件夹下，我们需要新建这两个语言包文件。

3. 创建语言包

在locales文件夹中新建en.json和zh.json文件，分别填入对应的文本内容。

// locales/en.json

{
  "hello": "Hello, World!"
}

// locales/zh.json

{
  "hello": "你好，世界！"
}

4. 在页面中使用vue-i18n

现在我们已经完成了vue-i18n的配置，接下来就是在页面中使用多语言功能了。我们可以通过this.$i18n.t方法来获取对应语言的文本。

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

<script>
export default {
  created() {
    console.log(this.i18n.locale); // 输出当前语言
    console.log(this.$t('hello')); // 输出对应语言的文本
  }
};
</script>

以上是一个简单的页面示例，当页面加载时，会根据当前的语言输出不同的文本内容。

5. 切换语言

在实际项目中，通常会提供切换语言的功能，让用户可以根据自己的需求选择展示的语言。可以在页面或组件中通过调用this.$i18n.locale来动态改变当前的语言。

<template>
  <div>
    <button @click="changeLocale('en')">English</button>
    <button @click="changeLocale('zh')">中文</button>
    <p>{{ t('hello') }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    changeLocale(locale) {
      this.i18n.locale = locale;
    }
  }
};
</script>

这样，用户可以通过点击按钮来切换页面展示的语言。