Javascript 无法将公用文件夹中的index.html与src文件夹中的index.js连接_Javascript_Html_Reactjs_Firebase Hosting

Javascript 无法将公用文件夹中的index.html与src文件夹中的index.js连接

javascript html reactjs

Javascript 无法将公用文件夹中的index.html与src文件夹中的index.js连接,javascript,html,reactjs,firebase-hosting,Javascript,Html,Reactjs,Firebase Hosting,我是新来的反应者，我还在学习。我做了一个测试网站，想把它放在firebase上。当我部署我的应用程序时，只呈现了index.html文件夹（背景显示，因为它在index.html中声明），但没有呈现src中的javascript文件。我的网站在本地运行文件，但无法进行部署这是我的index.html代码 <html lang="en"> <head> <meta charset="utf-8" />

我是新来的反应者，我还在学习。我做了一个测试网站，想把它放在firebase上。当我部署我的应用程序时，只呈现了index.html文件夹（背景显示，因为它在index.html中声明），但没有呈现src中的javascript文件。我的网站在本地运行文件，但无法进行部署

这是我的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();

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
//导入“./index.css”；
ReactDOM.render(

我的构建中的index.html与上面显示的我的公用文件夹中的index.html相同
这是目前的网站：
我想我错过了一步，因为我只是在学习。请帮助我。谢谢！
你需要的是为你的资源css/js/images/fonts设置baseUrl
在您的package.json中添加一个名为“homepage”的字段，并在您的案例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"
/>
.....

你附上了相同的屏幕快照。我更新了它。我不知道你的环境和你如何部署你的项目。但是你在build/dist目录中看到了什么？通常你在之前（或自动）构建你的应用程序正在部署。并且您的托管服务来自build/dist folderI的静态文件。我更新了帖子以包含我的build文件夹。如果您还需要其他信息，请告诉我。您需要在build文件夹中配置您的网站。现在您服务于public folder另一个快速解决方案是将publicUrl传递给build脚本，该脚本将替换%PUBLIC_URL%与提供的一个Mac/Linux:PUBLIC_URL=npm运行生成Windows:set PUBLIC_URL=npm运行生成
<base href="weatherman-9860a.web.app">

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