几分钟内即可为您的 Nuxt.js 应用程序添加国际化功能
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
很多前端开发人员都害怕实现国际化（通常称为“集成i18n”）。配置、动态添加新语言以及用户体验通常是他们面临的主要问题。
幸好，Nuxt.js让整个过程变得极其简单。在这篇简短的文章中，我将一步一步地介绍如何为 Nuxt 应用程序设置 i18n。
最终产品可以在 Codesandbox 上找到，链接在此。
第一步：安装vue-i18n和设置
我们将使用著名的vue-i18n包来处理国际化。
首先进行安装：
# Using npm
npm install vue-i18n
# Using yarn
yarn add vue-i18n
然后，在我们的配置文件中将其定义为插件：
// nuxt.config.js
export default {
// ...
plugins: ["~/plugins/i18n.js"],
// ...
};
现在我们需要创建前面提到的i18n.js文件来配置我们的插件：
// plugins/i18n.js
import Vue from "vue";
import VueI18n from "vue-i18n";
// Tell Vue to use our plugin
Vue.use(VueI18n);
export default ({ app }) => {
// Set the i18n instance on app
// This way we can use it globally in our components through this.$i18n
app.i18n = new VueI18n({
// Set the initial locale
locale: "en",
// Set the fallback locale in case the current locale can't be found
fallbackLocale: "en",
// Associate each locale to a content file
messages: {
en: require("~/static/content-en.json"),
fr: require("~/static/content-fr.json")
}
});
};
别忘了创建json用于存放每种语言文本值的文件。例如，我们可以创建以下文件：
// static/content-en.json
{
"title": "Hello, how are you?"
}
和
// static/content-fr.json
{
"title": "Bonjour, comment allez-vous?"
}
我们可以在组件中像这样访问这些值：
// Will return the correct string based on the current locale
this.$t("title")
步骤二：动态更改语言环境
当需要更改语言时，我们只需要更新i18n上下文对象的属性即可。locale
这里有一个可以解决这个问题的方法：
changeLanguage(lang) {
// Change the i18n context object's locale
// This makes it so the correct locale file is used
this.$i18n.locale = lang;
}
以下是该方法在组件中的应用示例：
<template>
<section>
<h1>{{ title }}</h1>
<div>
<button @click="changeLanguage('en')">EN</button>
<button @click="changeLanguage('fr')">FR</button>
</div>
</section>
</template>
<script>
export default {
computed: {
title() {
// this.$t("title") returns the value of our title attribute in our JSON file
// The correct file is selected based on the locale value
// If it was an object, we could access its attributes like so: this.$t("myObject").myAttribute
return this.$t("title");
}
},
methods: {
/**
* Called when a language button is clicked
* Changes the i18n context variable's locale to the one selected
*/
changeLanguage(lang) {
this.$i18n.locale = lang;
}
}
};
</script>
步骤3：等等，没有步骤3吗？
是的，这就是在 Nuxt 应用中处理国际化 (i18n) 所需了解的全部内容。
当然，还有很多方法可以自定义用户体验，详情请参阅官方文档。
希望这篇文章能帮助大家更好地理解 Nuxt 项目中的 i18n 技术。
欢迎关注我，以便及时获取我未来发布的关于 JavaScript、React、Vue 和 CSS 的文章。
推特绝对是了解我每天分享内容的最佳平台，所以欢迎随时在那里关注我👋。
文章来源：https://dev.to/christopherkade/adding-internationalization-to-your-nuxt-js-applications-39jd