Vue.js 3中使用papa-parse读取本地CSV文件报错求助

方法一：配置file-loader解析CSV文件（Vue CLI项目适用） #

1. 安装file-loader依赖：

npm install file-loader --save-dev

2. 在项目根目录的vue.config.js中添加CSV文件解析规则（没有该文件则新建）：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('csv')
      .test(/\.csv$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: '[name].[ext]',
        outputPath: 'assets/files/' // 和你的文件存放路径对应
      })
      .end()
  }
}

3. 修改读取代码，此时导入的CSV文件会被解析为访问URL，直接用Papa.parse处理：

import Papa from "papaparse";
import csvFile from "../../../assets/files/mediList.csv";

Papa.parse(csvFile, {
  download: true,
  encoding: "UTF-8",
  complete: function (results) {
    console.log(results.data);
  },
});

方法二：用Fetch直接请求静态CSV文件 #

不需要额外配置loader，直接通过相对路径发起请求读取内容：

import Papa from "papaparse";

fetch('../../../assets/files/mediList.csv')
  .then(res => res.text())
  .then(csvContent => {
    const parsedResult = Papa.parse(csvContent, { encoding: "UTF-8" });
    console.log(parsedResult.data);
  })
  .catch(err => console.log('读取失败:', err));

错误原因说明 #

Webpack默认不支持解析CSV这类非标准模块，直接导入会提示缺少对应loader；而fs是Node.js环境的文件系统API，浏览器环境无法使用，因此用它读取文件必然失败。

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