ChartJS Sveltekit,依赖项在开发中工作,但在构建后不直接加载到路由页面中

szqfcxe2  于 2023-01-13  发布在  Chart.js
关注(0)|答案(1)|浏览(179)

在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>
v440hwme

v440hwme1#

当导航到页面但直接访问不起作用时,这表明服务器端呈现存在问题。默认情况下,对页面的第一次访问在服务器上呈现,这可能会导致问题。
例如,您的页面代码必须避免访问onMount之外的任何浏览器API,因为这些API在服务器上不可用。请检查服务器进程的控制台和浏览器中的控制台是否有错误。
您也可以通过添加导出到+page.js/ts来关闭SSR。

export const ssr = false;

我只会建议这样做,以找出SSR是否是问题所在。永久关闭它应该只在极少数情况下,当绝对必要的。

相关问题