如何将 csv 文件加载到 nuxt vue 组件中答案

【问题标题】：How to load csv files into a nuxt vue component如何将 csv 文件加载到 nuxt vue 组件中
【发布时间】：2019-06-13 10:37:58
【问题描述】：

我目前正在尝试将 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
          }
        }
      ]
    }
  }
 }
}

提前致谢

【问题讨论】：

我希望它尝试加载相对于路由 url 的资源，而不是相对于文件路径。您检查过您的 csv 文件路径是否正确？
我将如何修改它以定位路线我可以使用 ~ 或 @ 还是需要完整路径？
我使用 import 语句在组件中导入 csv，然后在其上使用 d3.csv.parse(..) 是最明智的选择。当数据在同一个文件夹中时，无需调用 api。

标签： d3.js vue.js webpack nuxt.js

【解决方案1】：

我最近遇到了同样的问题，最终使用了@nuxt/content 模块——工作起来很神奇，甚至不需要包含 d3（这通常是我解析 CSV 文件的首选）。

【讨论】：

【解决方案2】：

我认为问题是您无法以您尝试的方式访问 csv 文件，这样做的方法是将文件存储在 '/assets' 目录中，然后您可以访问该目录，如我链接的文档中所示@ 987654322@我认为这也是存放此类文件的更正确位置，以避免在整个项目中出现挥之不去的文件

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。

【解决方案3】：

这对我有用：

  async mounted() {
    const d = await d3.csv("/data.csv");
    console.log(d);
  }

将 data.csv 放在 public 文件夹中。

【讨论】：