Nuxt中使用Chartist绘制图表报错：Cannot read property 'querySelectorAll' of null

这个报错的核心原因很明确：你在created钩子中初始化Chartist的时候，组件的DOM还没有完成挂载。created钩子是Vue组件实例创建后立即执行的，此时<canvas>元素还没有被渲染到页面上，Chartist用类选择器.ct-chart找不到对应的DOM节点，自然就抛出了找不到元素的错误。

下面是具体的修复方案，按优先级排序：

1. 切换到mounted钩子获取DOM #

Vue的mounted钩子会在组件DOM完全挂载到页面后才触发，这时候你可以安全地访问到<canvas>元素：

<template>
  <canvas class="ct-chart ct-perfect-fourth" />
</template>

<script>
export default {
  // 替换created为mounted
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      const data = {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        series: [
          [5, 2, 4, 2, 0]
        ]
      }
      const chart = new Chartist.Line('.ct-chart', data);
      return chart;
    },
  },
}
</script>

2. 用Vue的ref替代类选择器（更可靠） #

类选择器可能存在全局冲突的风险，用Vue的ref可以精准获取当前组件内的DOM元素，避免意外选中其他页面的同名元素：

<template>
  <!-- 给canvas添加ref属性 -->
  <canvas ref="chartCanvas" class="ct-chart ct-perfect-fourth" />
</template>

<script>
export default {
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      const data = {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        series: [
          [5, 2, 4, 2, 0]
        ]
      }
      // 通过$refs获取指定元素
      const chart = new Chartist.Line(this.$refs.chartCanvas, data);
      return chart;
    },
  },
}
</script>

3. 处理Nuxt的服务端渲染限制 #

Chartist是一个依赖浏览器DOM环境的库，而Nuxt默认会进行服务端渲染（SSR），在服务端执行时没有浏览器的document对象，可能会引发额外错误。你可以通过以下方式处理：

方式一：仅在客户端执行初始化 #

用process.client判断当前环境，确保只在浏览器中运行Chartist代码：

mounted() {
  if (process.client) {
    this.createChart();
  }
}

方式二：用<client-only>包裹组件 #

在父组件中用Nuxt提供的<client-only>标签包裹你的图表组件，让它只在客户端渲染：

<client-only>
  <your-chart-component />
</client-only>

方式三：引入Chartist的CSS样式 #

别忘了引入Chartist的默认样式，否则图表可能显示异常。你可以在nuxt.config.js中全局引入：

export default {
  css: [
    'chartist/dist/chartist.min.css'
  ]
}

或者在组件内局部引入：

import 'chartist/dist/chartist.min.css';

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