React项目导入.txt文件后仅输出路径，如何正确获取内容？

你看到的/static/media/sample.f2e86101.txt其实是Webpack（Create React App底层使用的打包工具）处理静态资源后的文件URL，而不是文件里的文本内容。这是因为默认情况下，Webpack会把.txt这类文件当成静态资源（类似图片、字体）来处理：它会给文件加上哈希后缀（避免缓存问题），然后输出到打包后的静态资源目录，导入时返回的就是这个资源的访问路径。

下面给你两种可行的解决方案，根据你的需求选择：

方案1：直接加载文本内容（适合小型文本） #

这个方法会把txt文件的内容直接打包进你的JS代码里，无需额外请求。

针对Create React App 5+（Webpack 5） #

Webpack 5支持通过资源查询参数直接指定加载方式，只需修改导入语句：

import myText from './sample.txt?raw';

之后再执行console.log(myText)，就能看到文件里的原始文本内容了。

针对旧版Create React App（Webpack 4及以下） #

需要先安装raw-loader，再用inline loader强制处理文本：

1. 安装依赖：

npm install raw-loader --save-dev

2. 修改导入语句：

import myText from '!!raw-loader!./sample.txt';

（!!的作用是跳过Webpack默认的file-loader处理，强制使用raw-loader解析文本）

方案2：通过Fetch请求获取内容（适合大文件） #

如果你的文本文件体积较大，或者不想把文本打包进JS bundle，可以通过fetch请求文件URL来获取内容：

import React, { Component } from 'react';
import './LoadMyFile.css';
import myText from './sample.txt';

export default class LoadMyFile extends Component {
  render() {
    return (
      <div>
        <button onClick={this.handleClick} className="LoadMyFile" name="button" variant="flat">test string</button>
      </div>
    )
  }
  handleClick = async () => {
    try {
      const response = await fetch(myText);
      const textContent = await response.text();
      console.log(textContent); // 这里就是文件的文本内容
    } catch (error) {
      console.error('加载文件失败:', error);
    }
  }
}

这个方法的核心是利用你导入的myText作为文件的访问URL，通过fetch请求获取资源后，用response.text()解析出文本内容。

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