Nuxt生成含Chart.js的可下载HTML后图表不显示问题排查

核心原因分析 #

不是SSR生命周期钩子的问题——onMounted在客户端渲染阶段会正常执行，问题出在离线单文件场景下的资源依赖加载失败以及Chart.js初始化的适配问题：

• 静态/服务器构建后，Chart.js的依赖资源（如脚本、样式）可能以相对路径或CDN形式引入，直接保存单文件时这些资源未被内嵌，离线时无法加载
• 浏览器“另存为”生成的HTML/MHTML可能未正确捕获canvas元素的上下文，或者Chart.js的初始化逻辑在单文件环境下触发时机存在冲突

具体修复步骤 #

1. 内嵌Chart.js资源到单文件 #

放弃CDN引入，改用本地安装并配置Nuxt将资源打包进静态文件：

npm install chart.js vue-chartjs

在nuxt.config.ts中添加构建配置，强制将Chart.js打包进主文件：

export default defineNuxtConfig({
  build: {
    extend(config, { isClient }) {
      if (isClient) {
        config.resolve.alias['chart.js'] = 'chart.js/dist/chart.umd.js'
      }
    }
  }
})

2. 适配Chart组件的初始化逻辑 #

修改Chart组件，确保在客户端环境下安全初始化，处理canvas上下文问题：

<template>
  <canvas ref="chartCanvas"></canvas>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Chart, registerables } from 'chart.js'

Chart.register(...registerables)

const chartCanvas = ref(null)
let chartInstance = null

onMounted(() => {
  // 仅在客户端且canvas元素存在时执行初始化
  if (process.client && chartCanvas.value) {
    const ctx = chartCanvas.value.getContext('2d')
    chartInstance = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: ['已解决', '处理中', '待分配'],
        datasets: [{
          data: [65, 25, 10],
          backgroundColor: ['#4CAF50', '#FFC107', '#F44336']
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    })
  }
})

// 组件卸载时销毁实例，避免内存泄漏
onUnmounted(() => {
  chartInstance?.destroy()
})
</script>

<style scoped>
canvas {
  height: 300px !important;
  width: 100% !important;
}
</style>

3. 正确生成可离线单文件 #

不要直接用浏览器“另存为”，通过工具将静态构建产物内嵌为单HTML：

• 执行静态构建：

  npx nuxi generate
  

• 使用inline-source工具将所有CSS、JS内嵌到index.html：

  npm install inline-source -g
  cd .output/public
  inline-source index.html > offline-service-overview.html
  

额外注意事项 #

• 将所有静态资源（如自定义图标）转换为base64格式内嵌，避免外部依赖
• 测试离线访问时，若浏览器限制本地文件脚本执行，可启动本地静态服务器测试：

  npx serve offline-service-overview.html
  

内容的提问来源于stack exchange，提问作者fesieg