Svelte-i18n报告json文件中冒号处的意外标记

Question

我一直在使用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文件。

Answer 1

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

$ npm i @rollup/plugin-json

或

yarn add @rollup/plugin-json

然后将其导入rollup.config.js

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

然后将其添加到插件部分的某个位置：

json()

Answer 2

看起来您需要将"header.title“更改为"header_title”。如果您使用"header.title“，那么在您的HTML/svelte文件中应该是这样的

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

在你的en.json中就像这样

{
  "header": {
    "title": "Hello"
  }
}