Svelte-i18n 抱怨 json 文件中冒号处的意外标记

Svelte-i18n complains of unexpected token at colon in json file

我一直在使用 Routify 和 Svelte-i18n 与 Svelte 合作。我似乎根本无法让 Svelte-i18n 达到 运行。

我有以下 i18n 文件:

{
  "header.title": "Title"
}

i18n.js这里导入:

import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
import en from "./locales/en.json";

addMessages("en", en);

init({
  fallbackLocale: "en",
  initialLocale: getLocaleFromNavigator(),
});

并在 App.svelte 中初始化如下:

<script lang="ts">
  import { Router } from "@roxi/routify";
  import { routes } from "../.routify/routes";

  import "./i18n";
</script>

<Router {routes} />

<style global>
  @import url("https://fonts.googleapis.com/css?family=Dosis|Great+Vibes&display=swap");
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

但无论如何,我总是在 json 文件中的冒号上得到 unexpected token。我不知道为什么会这样,因为这是一个格式正确的 json 文件。

问题可能是您没有添加 json 解析器。

$ npm i @rollup/plugin-json

yarn add @rollup/plugin-json

然后在rollup.config.js中导入:

import json from "@rollup/plugin-json";

然后将其添加到插件部分的某处:

json()

您似乎需要将“header.title”更改为“header_title”。如果你使用“header.title”,你的 HTML/svelte 文件中应该有这样的

<h1>{$_('header.title')}</h1>

在你的 en.json

中像这样
{
  "header": {
    "title": "Hello"
  }
}