Hugo里怎么在SSR页面中正确引入第三方JS库？

Mr-庆娇提问于 2026-03-31 06:45:13 阅读 3

框架

我在用Hugo做静态站点，想在某个页面引入一个第三方JS库（比如Chart.js），但发现直接写script标签在模板里不起作用，控制台报错说Chart is not defined。我试过把script放在head和body底部都不行。

这是我的模板片段：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('myChart');
  new Chart(ctx, { type: 'bar', data: { /* ... */ } });
</script>

是不是Hugo的SSR机制导致脚本执行时机有问题？该怎么正确加载外部JS？

我来解答赞 6 收藏

反馈

1 条解答

码农岳阳 Lv1

问题在于Hugo SSR页面加载顺序问题，你需要确保Chart.js完全加载后再执行你的代码。给script标签加上async或者defer属性，或者用事件监听来确保加载完成。试试这个：



<script defer src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

  document.addEventListener('DOMContentLoaded', function() {

    const ctx = document.getElementById('myChart');

    if (ctx) new Chart(ctx, { type: 'bar', data: { /* ... */ } });

  });

</script>

记得检查DOM元素是否存在再初始化图表，避免undefined报错。这招我试过很多次了，应该能解决你的问题。

2026-03-31 07:01