在sveltekit项目中,一切都在dev中工作,当在路由页面上构建时,一些依赖项似乎不工作。
具体而言,charts.js
在开发中运行良好,但在为生产构建时,在路由页面/page
中不运行。
这很难调试,因为没有错误消息,但当转到/page
时,GET请求明显较少,如果我转到主页,然后使用<a/>
链接到路由,一切都工作正常。
这背后的原因可能是什么?我错过了一些配置吗?可能不希望直接获取路由?
PD:我在使用svelte-chartjs图书馆。
该组件如下所示:
<script lang="ts">
import { Doughnut } from 'svelte-chartjs';
export datax = 10
export datay = 20
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
ArcElement,
CategoryScale,
} from 'chart.js'
let chart: Doughnut;
let data = {
labels: ['Pension', 'Monthly paid out salary', 'Tax Under', 'Tax Over'],
datasets: [
{
label: 'Danish Kronws',
data: [datax , datay],
backgroundColor: [
'rgba(255, 134,159,0.4)',
'rgba(98, 182, 239,0.4)',
],
borderWidth: 2,
borderColor: [
'rgba(255, 134, 159, 1)',
'rgba(98, 182, 239, 1)',
],
},
],
};
ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);
$: {if (chart) {
chart.data.datasets[0].data = [datax ,datay]
}
}
</script>
<div class="chart">
<Doughnut bind:chart data={data} options={options} />
</div>
<style>
.chart{
border-radius: 10px;
box-shadow:0 0 15px 4px rgba(0,0,0,0.06);
padding: 10px;
width: 600px;
}
</style>
1条答案
按热度按时间v440hwme1#
当导航到页面但直接访问不起作用时,这表明服务器端呈现存在问题。默认情况下,对页面的第一次访问在服务器上呈现,这可能会导致问题。
例如,您的页面代码必须避免访问
onMount
之外的任何浏览器API,因为这些API在服务器上不可用。请检查服务器进程的控制台和浏览器中的控制台是否有错误。您也可以通过添加导出到
+page.js
/ts
来关闭SSR。我只会建议这样做,以找出SSR是否是问题所在。永久关闭它应该只在极少数情况下,当绝对必要的。