0

我在 Svelte 做 SPA。它在本地和 Svelte REPL 上工作，其中显示了条件内的组件，但在我部署到 Gitlab Pages 时却没有。

  # .gitlab-ci.yml
  script:
    - npm install
    - npm run build

在我的情况下，App.svelte我使用 asvelte:component来始终渲染当前$screen的footer组件，如果屏幕是Payments

<script>
    import { screen } from '../store.js' // current screen: Login, Profile, etc
    import Login from './Login.svelte'
    import Menu from '../components/Menu.svelte'

    // Screens with Menu
    const screens_menu = ['Payments']

    // Default screen
    $screen = Login
</script>

<main>
    <svelte:component this={$screen} />
    {#if screens_menu.includes($screen.name)}
        <footer><Menu /></footer>
    {/if}
</main>

在我的store.js我有这个

import { writable } from 'svelte/store'
// Current Screen
export let screen = writable(null)

检查相同的示例

在 Svelte REPL 上工作。

笔记

如果我使用组件屏幕本身而不是变量，name一切都会按预期工作，但现在（可能）我正在重载（导入所有屏幕）。现在，它只是Payments但它可能是更多的屏幕。

<script>
    import { screen } from '../store.js'
    import Payments from './Payments.svelte'
    import Menu from '../components/Menu.svelte'
    
    // Screens with Menu
    const screens_menu = [Payments]
    // ...
</script>

<main>
    <svelte:component this={$screen} />
    {#if screens_menu.includes($screen)}
        <footer><Menu /></footer>
    {/if}
</main>

我是否需要配置任何额外的东西，有人在部署后尝试类似的东西吗？

任何帮助将不胜感激:)

4

2 回答 2

0

如果您的商店被定义为writable(null)，在我看来，您必须警惕商店的值为空的情况。

否则，您可能应该这样写您的条件：

    {#if $screen && screens_menu.includes($screen.name)}
        <footer><Menu /></footer>
    {/if}
于 2020-10-21T16:06:03.547 回答
0

$screen.name由于内部重构（捆绑），部署发生了变化。因此，条件永远不会满足并且Menu永远不会显示。

在任何应用程序中依赖函数的名称 - 无论是否 Svelte - 都是一个坏主意，因为可能会受到捆绑的影响。

最后，正如我在问题中提出的那样，我使用的是组件而不是名称。也许感谢 tree-shaking 没有超载。

于 2020-11-20T01:11:02.533 回答