在哪里放置静态文件以便能够引用它？答案

【问题标题】：Where to place a static file to be able to reference it?在哪里放置静态文件以便能够引用它？
【发布时间】：2021-10-22 08:26:07
【问题描述】：

vmsg 需要一个指向 .wasm 文件的 URL 链接，它需要它才能工作。他们的示例代码（确实有效）如下所示：

import React, { Component } from 'react';
import vmsg from 'vmsg';

const test = new vmsg.Recorder({wasmURL: "https://unpkg.com/vmsg@0.3.0/vmsg.wasm"});

但我想让该文件引用我的应用程序中的目录而不是这个外部 URL，我不确定：

我应该把这个文件放在哪里（assets/public/node_modules 文件夹）？
我会做些什么来完成这项工作（我是进行导入还是以某种方式直接引用它）？

我尝试将文件放在我的资产文件夹中，并将代码行更改为以下行中的许多内容：

const test = new vmsg.Recorder({wasmURL: '../../assets/vmsg.wasm'});

但似乎没有任何效果，经过一番阅读，这是有道理的。但我仍然不确定添加这样一个文件的正确方法应该是什么。

【问题讨论】：

这是 CRA 创建的应用程序（然后参见例如create-react-app.dev/docs/using-the-public-folder），还是其他？您是否使用 Webpack（然后需要配置文件加载器以进行导入以提供路径）？
@jonrsharpe，我将 CRA 与 Craco 一起使用。那么，这是否意味着我应该将它放在公用文件夹中并使用process.env.PUBLIC_URL 之类的东西？对吗？
我的理解是 Craco 用于更改默认配置，因此无论这些更改是否会影响此功能，我们无法告诉您，但我倾向于在你的位置上试试。
谢谢@jonrsharpe，我正在尝试使用process.env.PUBLIC_URL，但又遇到了另一个错误。不过，它似乎确实看到了wasm 文件。这是希望我走在正确的道路上。谢谢。

标签： reactjs node-modules

【解决方案1】：

我看到有些人在尝试导入照片资产时遇到了类似的情况。我发现一种可行的解决方案是在末尾包含 .default。

const test = new vsmg.Recorder({wasmURL: require('../../assets/vmsg.wasm').default});

【讨论】：

这似乎可行（就像@jonsharpe 将其添加到我的公用文件夹的想法一样） - 现在我遇到了在本地服务器中加载.wasm 文件的问题，但至少这个现在正在工作。谢谢！