如何将CSV文件加载到Nuxt Vue组件中

Question

我目前正在尝试将一个csv文件加载到Nuxt页面中。文件夹结构如下，会产生错误"Failed to load resource: the server responded with a status of 404 (Not Found)":

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文件夹中的webpack配置中添加了以下内容：

  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
          }
        }
      ]
    }
  }
 }
}

提前感谢您。

- jon

---

我期望它尝试相对于路由URL加载资源，而不是相对于文件路径。你检查过CSV文件路径是否正确了吗？ - Sumurai8

我该如何修改以针对路由？我可以使用“~”或“@”，还是需要使用完整路径？ - jon

我认为在组件中使用导入语句导入CSV文件，然后使用d3.csv.parse(..)对其进行处理是最明智的选择。当数据位于同一文件夹中时，无需进行API调用。 - Sumurai8

Answer 1

这对我有用：

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

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

- Catfoxes

Answer 2

我认为问题在于您无法以您尝试的方式访问csv文件，正确的方法是将文件存储在'/assets'目录中，然后可以按照我链接的文档所示进行访问~/assets/file.csv。我认为这也是存储此类文件以避免在整个项目中留下残留文件的更正确位置。

- kgb07zy

---

请在您的回答中提供更多细节。目前的写法让人难以理解您的解决方案。 - Community

Answer 3

我最近也有同样的问题，最后使用了@nuxt/content模块——非常好用，甚至不需要包含d3（通常我会用它来解析CSV文件）。

- Aias

---

好的，你能具体一些吗？因为在https://content.nuxtjs.org/guide/writing/csv上，关于如何使用csv的说明几乎为零。 - Marek Kamiński