0

我正在使用 Svelte 3 + Snowpack 3 + Routify + Svelte-i18n。我没有使用 Sapper。我用这个模板 安装了所有东西。这是我的仓库，您可以在其中查看我的所有文件。

我正在关注svelte-i18n的官方教程。

问题：我无法用他们的教程翻译我的页面。我希望它异步工作，因为我会有很多页面的大量翻译。

但是当我在我的.svelte文件中使用这个脚本时，它就可以工作了：

import { _ } from 'svelte-i18n';
import { addMessages, init } from "svelte-i18n";

import en from "./lang/en.json";
import az from "./lang/az.json";

addMessages("en", en);
addMessages("az", az);

init({
    initialLocale: "az",
});

当我删除它并按照他们的建议仅使用它时，我得到一个没有任何错误的空白屏幕：

import { _ } from 'svelte-i18n';

除此之外的一切都与教程完全相同。我怀疑_layout.svelte文件中的原因来源，因为我不知道那是什么。根据我的研究，这与 Sapper 有关。我不知道 Snowpack 是否使用它，但也许我需要进行一些更改以使其与 Snowpack 一起使用。此外，看起来教程是在脑海中写的 Sapper，因为他们多次调用它的名字。

4

1 回答 1

1

如果您打开浏览器的开发人员工具，您会看到出现的错误。我在本地运行您的应用程序并看到以下错误：Uncaught (in promise) Error: [svelte-i18n] Cannot format a message without first setting the initial locale.

问题是您正在使用register加载字典并尝试在字典准备好之前检索消息。此方法异步运行，因此在 Svelte 模板呈现时可能不会加载您的语言环境。你有两个选择：

  1. addMessages使用您的入口点同步加载字典。这样您就不必等待字典加载来检索消息。
// index.js
import { register, init, getLocaleFromNavigator, addMessages } from 'svelte-i18n';
import en from './pages/lang/en.json'
import az from './pages/lang/az.json'
addMessages('en', en);
addMessages('az', az);

如果您有很多语言环境，这可能会降低性能，因为在启动您的应用程序之前都需要加载它们。

  1. 继续异步加载字典并等待它们加载，然后再使用$isLoadingstore检索消息。该存储的值将告诉您检索消息是否安全。
<!-- index.svelte -->
<script>
    import { _, isLoading } from 'svelte-i18n';
</script>

{#if $isLoading}
    <p>Loading</p>
{:else}
    <h1 class="mx-auto mb-10 font-semibold text-4xl text-shadow text-gray-900">{$_('home.hero-h')}</h1>
    <h5 class="text-gray-700 mb-12">{$_('home.hero-p')}</h5>
{/if}
于 2021-02-11T00:03:16.637 回答