问题描述
我正在svelte做SPA。它可以在本地和svelte REPL上运行，在svelte REPL上可以显示条件中的组件，但是在我部署到Gitlab Pages时不可以。
.main-content {
background-image: url("https://cdn.pixabay.com/photo/2020/04/15/12/12/flowers-5046413__340.jpg");
background-size: 100% auto;
background-repeat: repeat-y;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
transform: scale(1.05);
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
.content {
position: absolute;
left: 0;
right: 0;
z-index: 1;
width: 900px;
background-color: rgba(4,12,21,0.604);
text-align: center;
opacity: 0.7;
height: 100%;
display: block;
overflow-y: hidden;
overflow-x: hidden;
color: #ffffff;
}在我的<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main-content"></div>
<div class="content">Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/>Some content<br/></div>
</body>
</html>中，我使用 # .gitlab-ci.yml
script:
- npm install
- npm run build
总是呈现当前的App.svelte，如果屏幕是svelte: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>
检查相同的示例
https://www.simoahava.com/analytics/customize-scroll-depth-trigger/
注意
如果我使用组件屏幕本身而不是变量store.js，那么一切都会按预期进行，但是现在（可能）我正在超载（导入所有屏幕）。现在，只有import { writable } from 'svelte/store'
// Current Screen
export let screen = writable(null)
，但可能会有更多屏幕。
name我是否需要配置其他任何东西，有人在部署后进行类似的尝试？
任何帮助将不胜感激：）
解决方法
如果您的商店被定义为writable(null)，在我看来，您必须防范商店的值为null的情况。
否则，您可能应该这样写条件：
{#if $screen && screens_menu.includes($screen.name)}
<footer><Menu /></footer>
{/if}
$screen.name部署后由于内部重构（捆绑）而发生了变化。因此，永远不会满足该条件，也永远不会显示Menu。
在任何应用程序中都依赖函数名称（无论是否精简）是一个坏主意，因为它可能会受到捆绑的影响。
最后，按照我的问题中的建议，我使用的是组件而不是名称。也许要感谢摇树，所以没有重载。