React.js中如何引用TXT文件内容而非文件路径？

方法一：Webpack环境用raw-loader #

1. 先安装依赖：

npm install raw-loader --save-dev

2. 两种使用方式：
   • 直接在导入时指定loader：

     import Bashcode from 'raw-loader!./Bashcode.txt';
     
     <button onClick={() => navigator.clipboard.writeText(Bashcode)}>Naar Postman</button>
     

   • 或者修改webpack配置，全局处理所有TXT文件：

     module.exports = {
       module: {
         rules: [
           {
             test: /\.txt$/i,
             use: 'raw-loader',
           },
         ],
       },
     };
     

   配置完成后，直接import Bashcode from './Bashcode.txt'就能拿到文件内容。

方法二：Vite或现代环境用Import Assertions #

无需额外安装依赖，通过断言声明文件类型即可读取内容：

import Bashcode from './Bashcode.txt' assert { type: 'text' };

<button onClick={() => navigator.clipboard.writeText(Bashcode)}>Naar Postman</button>

方法三：Fetch请求读取内容 #

不想修改构建配置的话，可通过fetch请求静态文件：

const copyToClipboard = async () => {
  try {
    const res = await fetch('./Bashcode.txt');
    const content = await res.text();
    await navigator.clipboard.writeText(content);
  } catch (err) {
    console.error('复制失败:', err);
  }
};

<button onClick={copyToClipboard}>Naar Postman</button>

注意：要把TXT文件放在项目的public目录下，否则构建后可能无法访问文件路径。

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