Jan*_*nik 7 javascript http-status-code-404 reactjs webpack manifest.json
我正在尝试通过添加manifest.json来使我现有的 React 应用程序渐进式。
但是,我的应用程序似乎无法找到我的manifest.json文件,因为我在查看开发人员工具的网络选项卡时收到上述错误消息和无法获取 /manifest.json。这很奇怪,因为我的manifest.json位于我的应用程序的根目录,正是错误指出它找不到文件的位置。
我尝试了几种方法,例如在每个目录中放置一个manifest.json文件或在我的 webpack 配置中引入一个 json-loader,但没有任何效果。
我在哪里引用清单
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json" >
</head>
<body>
<div id="root" class="body"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
此外,我正在使用webpack-manifest-plugin在我的构建目录中创建一个asset-manifest.json文件来映射我的索引文件。
配置文件
//...
const ManifestPlugin = require("webpack-manifest-plugin")
module.exports = {
plugins: [
new ManifestPlugin({
fileName: "asset-manifest.json"
})
//...
Run Code Online (Sandbox Code Playgroud)
创建资产清单.json
{
"index.js": "index.bundle.js",
"index.html": "index.html"
}
Run Code Online (Sandbox Code Playgroud)
我希望你可以帮助我
问题不仅存在于manifest.json,还存在于所有json 文件。正如这里所说: https: //stackoverflow.com/a/29633038/3231884,您需要根据以下示例设置 web.config:
<?xml version="1.0"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>
Run Code Online (Sandbox Code Playgroud)
之后,您应该按照以下步骤将“npm run build”复制到构建文件夹(归功于 Liviu Costea): https://medium.com/hackernoon/adding-web-config-to-react-projects-3eb762dbe01f