如何将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
          }
        }
      ]
    }
  }
 }
}

提前感谢

Answer 1

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