Svelte-i18n带雪包显示空白页，没有错误。
Svelte-i18n带雪包显示空白页，没有错误。
提问于 2021-02-10 21:50:49
我正在使用斯维特3+雪包3+ Routify + Svelte-i18n。我不使用Sapper，我用此模板安装了所有的东西。这里是我的回购，你可以在那里看到我所有的文件。
我正在跟踪官方教程的苗条-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一样。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-11 00:03:16
如果打开浏览器的开发工具，您可以看到所得到的错误。我在本地运行了您的应用程序，并看到了以下错误：Uncaught (in promise) Error: [svelte-i18n] Cannot format a message without first setting the initial locale.
问题是，您正在使用register加载字典，并试图在字典准备好之前检索消息。此方法为异步运行，因此您的区域设置可能不会在Svelte模板呈现时加载。你有两个选择：
- 在入口点使用
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);如果你有大量的语言环境，这可能会降低性能，因为它们都需要在启动应用程序之前被加载。
- 继续异步加载字典，并在使用商店检索消息之前等待它们加载。此存储的值将告诉您检索消息是否安全。
<!-- 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}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66145620
复制相关文章
相似问题
腾讯云开发者
