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

Question

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

这是我的 index.html 的公共文件夹

这是我的 src 文件夹，里面有我的 index.js 和其他 js 文件

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

这是我的构建树

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

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

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

Answer 1

您需要为您的资源 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"
/>
.....

另一种可能有效的方法是设置

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

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

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

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

问题描述

1 个解决方案

解决方案1
0 2020-08-31 21:14:33

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

问题描述

1 个解决方案

解决方案1 0 2020-08-31 21:14:33

解决方案1
0 2020-08-31 21:14:33