Vue.js 3 CLI项目中如何解析src文件夹内的CSV文件？

嘿，我来帮你搞定Vue 3 CLI里导入CSV文件的问题！你遇到的这两个问题我都懂，咱们一步步来解决～

方法一：配置csv-loader实现类似JSON的导入方式 #

你已经装了csv-loader，但因为Vue CLI项目用vue.config.js来管理webpack配置（而不是单独的webpack.config文件），所以需要在这里添加loader配置：

1. 打开项目根目录下的vue.config.js（如果没有就新建一个），添加以下配置：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.csv$/, // 匹配所有.csv文件
          loader: 'csv-loader',
          options: {
            header: true, // 将CSV第一行作为对象的键
            dynamicTyping: true, // 自动转换数据类型（比如数字、布尔值）
            skipEmptyLines: true // 跳过空行
          }
        }
      ]
    }
  }
}

2. 保存配置后，重启你的开发服务器（yarn serve）。

3. 现在你就可以像导入JSON一样直接导入CSV文件了：

import csvExample from "@/db/example.csv";

导入后csvExample会是一个对象数组，每个对象对应CSV里的一行，键就是CSV的表头。

方法二：用PapaParse正确解析CSV文件 #

你之前用PapaParse出错是因为直接把文件路径传给了parse方法——PapaParse不会识别Vue的@别名，也不会自动加载文件内容，它需要的是文件的原始文本内容。这里有两种正确的用法：

子方法1：通过raw导入获取文件内容 #

Vue CLI支持用?raw后缀直接导入文件的原始文本，不需要额外装loader：

1. 确保已经安装了PapaParse：

yarn add papaparse

2. 在组件里这样使用：

import Papa from 'papaparse'
// 用?raw后缀导入CSV的原始文本内容
import csvContent from '@/db/example.csv?raw'

export default {
  data() {
    return {
      csvData: []
    }
  },
  mounted() {
    // 解析原始文本
    const parseResult = Papa.parse(csvContent, {
      header: true,
      dynamicTyping: true,
      skipEmptyLines: true
    })

    // 处理解析结果
    if (parseResult.errors.length === 0) {
      this.csvData = parseResult.data
    } else {
      console.error('CSV解析出错:', parseResult.errors)
    }
  }
}

子方法2：用Fetch加载文件（适合public目录下的文件） #

如果你把CSV文件放到项目的public目录下（比如public/db/example.csv），可以用Fetch加载：

import Papa from 'papaparse'

export default {
  data() {
    return {
      csvData: []
    }
  },
  async mounted() {
    try {
      const response = await fetch('/db/example.csv')
      const csvContent = await response.text()
      const parseResult = Papa.parse(csvContent, {
        header: true,
        dynamicTyping: true,
        skipEmptyLines: true
      })
      this.csvData = parseResult.data
    } catch (error) {
      console.error('加载CSV文件失败:', error)
    }
  }
}

不过这种方法不适合放在src目录下的文件，因为构建后文件路径会变化，所以更推荐子方法1。

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