无法将公用文件夹中的 index.html 与 src 文件夹中的 index.js 连接起来答案

【问题标题】：Unable to connect index.html in public folder with index.js in src folder无法将公用文件夹中的 index.html 与 src 文件夹中的 index.js 连接起来
【发布时间】：2020-12-19 19:30:19
【问题描述】：

我是 react.j 的新手，仍在学习。我制作了一个测试网站，并希望将其托管在 firebase 上。当我部署我的应用程序时，只呈现了我的 index.html 文件夹（背景显示，因为它是在 index.html 中声明的），但我在 src 中的任何 javascript 文件都没有被呈现。我的网站在本地运行文件，但无法进行部署。

Here is my public folder with my index.html

Here is my src folder with my index.js and other js files

这是我的 index.html 代码

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
</head>
<body
    style="
        text-align: center;
        background-image: url('https://www.treehugger.com/thmb/7KYmuAKvOj3cDpRK47BMO8rwUDU=/768x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/__opt__aboutcom__coeus__resources__content_migration__treehugger__images__2019__08__clouds-2dcb0f4cf2934a48bd173b6474c4784c.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        background-attachment: fixed;
    "
>
    <div id="root"></div>

这是我的 index.js 代码

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';
import * as serviceWorker from './serviceWorker';
// import './index.css';

ReactDOM.render(
<div className="Outer">
    <App />
</div>,
document.getElementById('root')
);

serviceWorker.unregister();

Here is my build tree

我的构建中的 index.html 与上面显示的我的公用文件夹中的相同。

这是现在的网站：https://weatherman-9860a.web.app/

我想我错过了一步，因为我只是在学习。请帮我。谢谢！

【问题讨论】：

你附上了相同的截图
很抱歉。我更新了。
我不了解您的环境以及您如何部署项目。但是你在 build/dist 目录中看到了什么？通常你在部署之前（或自动）构建你的应用程序。您的主机从 build/dist 文件夹中提供静态文件
我更新了帖子以包含我的构建文件夹。如果您还需要什么，请告诉我。
您需要在构建文件夹中配置您的网站。现在你提供公用文件夹

标签： javascript html reactjs firebase-hosting

【解决方案1】：

您需要为您的资源 css/js/images/fonts 设置 baseUrl

在您的 package.json 中添加一个名为“主页”的字段，并将其值设置为您的域，在您的情况下为 weatherman-9860a.web.app

示例代码

....
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"homepage": "weatherman-9860a.web.app",
"eslintConfig": {
.....

然后运行构建脚本，这将导致基础 url 附加到资源

.....
 <meta charset="utf-8" />
<link rel="icon" href="/weatherman-9860a.web.app/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
  name="description"
  content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="/weatherman-9860a.web.app/logo192.png" />
<link rel="manifest" href="/weatherman-9860a.web.app/manifest.json" />
<title>React App</title>
<link
  href="/weatherman-9860a.web.app/static/css/main.5f361e03.chunk.css"
  rel="stylesheet"
/>
.....

另一种可行的方法是设置

<base href="weatherman-9860a.web.app">

在您构建的 index.html 中的 head 标签中，它将解析类似的路由

 /static/css/some.css ----> weatherman-9860a.web.app/static/css/some.css

【讨论】：

另一种快速的解决方案是将 publicUrl 传递给构建脚本，然后将 %PUBLIC_URL% 替换为提供的 Mac/Linux：PUBLIC_URL=weatherman-9860a.web.app npm run build Windows: set PUBLIC_URL=@987654322 @npm 运行构建