d3.js - 如何将 csv 文件加载到 nuxt vue 组件中

Question

我目前正在尝试将 csv 文件加载到 Nuxt 页面中。文件夹结构如下并产生错误“加载资源失败：服务器响应状态为 404（未找到）”：

Project
  |
  +--pages
      |
      +--lesson
          |
         +--index.vue
         +--file.csv

import * as d3 from 'd3';
    export default{
    data(){
    return{
     dataset1:[]
    }

mounted(){

  d3.csv('file.csv', (myData) => {
  console.log('Mydta', myData);
  this.dataset1 = myData;
 })
 }
}     

我已将以下内容添加到 nuxt 文件夹中的 web pack 配置中：

  build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
  config = {
    module: {
      rules: [
        {
          test: /\.csv$/,
          loader: 'csv-loader',
          options: {
            dynamicTyping: true,
            header: true,
            skipEmptyLines: true
          }
        }
      ]
    }
  }
 }
}

提前致谢

标签： d3.jsvue.jswebpacknuxt.js

Answer 1

我最近遇到了同样的问题，最终使用了@nuxt/content模块——就像一个魅力，甚至不需要包含 d3（这通常是我解析 CSV 文件的首选）。