logo标签列表

如何将React应用程序部署到Godaddy服务器？

reactjsdeploymentreact-router
4

我是一个新手，正在学习React技术，并已经制作了一个网站。在本地环境中，一切都很好，但是当我上传构建文件到服务器后，在<div id="root"></div>中什么也没有显示，请帮助我部署应用到Godaddy服务器。

这里是我的package.json文件，其中我设置了主页为'www.xyz.com/react'

package.json

{
  "name": "reactapp",
  "version": "0.1.0",
  "private": true,
  "homepage": "/react",
  "dependencies": {
    "@glidejs/glide": "^3.4.1",
    "express": "^4.17.1",
    "history": "^1.17.0",
    "html-react-parser": "^0.9.1",
    "jquery": "^3.4.1",
    "path": "^0.12.7",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-history": "^0.18.2",
    "react-owl-carousel": "^2.3.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.1.1",
    "react-typist": "^2.0.5",
    "read-more-react": "^1.0.9",
    "sweetalert2": "^8.18.4",
    "teletype": "^0.2.0",
    "webpack-cli": "^3.3.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "webpack": "webpack"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.41.2"
  }
}

App.js

import React from 'react';
import './App.css';
import { BrowserRouter  as Router, Route ,Switch } from "react-router-dom";
import  history from "history";
import Home from './pages/Home/HomePage.js';
import Portfolio from './pages/Portfolio/PortfolioPage.js';
import Careers from './pages/Careers/CareersPage.js';
import Blog from './pages/Blog/BlogPage.js';
import CaseStudies from './pages/Case-Studies/Case-Study-Page.js';
import SingleCaseStudy from './pages/Single-Case-Study/SingleCaseStudy.js';
import SingleBlogPage from './pages/Single-Blog/SingleBlogPage.js';
import Contact from './pages/Contact/ContactPage.js';
/*import BlogPage from './pages/Blog/BlogPage.js';
import CaseStudyPage from './pages/Case-Studies/Case-Study-Page.js';
import ContactPage from './pages/Contact/ContactPage.js';
import PortfolioPage from './pages/Portfolio/PortfolioPage.js';
*/
const routes = (
  <Router history={history}>
  <Switch>
    <Route path='/' exact name="Home Page" component={Home} />
                <Route path='/Portfolio' name="Portfolio Page" component={Portfolio} />
                <Route path='/Careers' name="Careers Page" component={Careers} />
                <Route path='/Blog' name="Blog Page" component={Blog} />
                <Route path='/CaseStudies' name="Case Studies Page" component={CaseStudies} />
                <Route path='/Contact' name="Contact Page" component={Contact} />
                <Route path='/SingleBlog/:id' name="Blog Page" component={SingleBlogPage} />
                <Route path='/SingleCaseStudy/:id' name="Case Study Page" component={SingleCaseStudy} />
  </Switch></Router> )
 function App() {
  return (
        <div className="main-wrapper">
               {routes}  
        </div>
  );
}

export default App;

Header.js

import React, { Component } from 'react';
import SearchComp from './../Search/SearchComp.js';
import SideMenuComp from './../Side-Menu/SideMenuComp.js';
import $ from 'jquery';
import { Link } from 'react-router-dom'
class HeaderComp extends Component {
    render() {
        return (
            <>
                <header className="itl-header itl-header--fixed fixed-top is-visible" data-nav-status="toggle">
                    <div className="itl-head">
                        <div className="container">
                            <nav className="navbar navbar-expand-lg navbar--dark">
                                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                                    <ul className="navbar-nav ml-auto">
                                        <li className="nav-item ">
                                             <Link to ="/" className="nav-link" activeclassname='active'>Home</Link>
                                        </li>
                                        <li className="nav-item">
                                            <Link to ="/Portfolio" className="nav-link" activeclassname='active'>Portfolio</Link>
                                        </li>
                                        <li className="nav-item">
                                            <Link to ="/Careers" className="nav-link" activeclassname='active'>Careers</Link>
                                        </li>
                                        <li className="nav-item">
                                            <Link to ="/CaseStudies" className="nav-link" activeclassname='active'>Case Studies</Link>
                                        </li>
                                        <li className="nav-item">
                                            <Link to ="/Contact" className="nav-link" activeclassname='active'>Contact</Link>
                                        </li>
                                        <li className="">
                                            <a href="#" className="btn btn-outline-primary btn-sm quick_enquiry_btn itl-off-canvas-activate jsOffcanvasActivate">Quick Enquiry</a>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                    </div>
                </header>
            </>
        );
    }
}

export default HeaderComp;
3个回答
1
请确保您已正确配置基本的 href，它应指向 /react。有关基本URL元素的更多信息。
React路由器还需要知道关于 /react，为此使用<Router> 的 basename 属性。basename 的文档。
检查浏览器开发者工具的网络选项卡，查看是否存在加载JS文件时的404错误。
非常感谢您，先生。它解决了我的问题。我将代码更改为<Router history={history} basename="/react">。 - Brajesh Sharma
1
有一些选项可以使用，例如webpack。您可以定义不同的基本href或每个环境的某些变量，请查看https://www.npmjs.com/package/base-href-webpack-plugin和https://webpack.js.org/plugins/define-plugin/。 - ekuusela
谢谢@ekuusela，我使用了另一种方法，对于路径，我使用了${process.env.PUBLIC_URL}来导入图像。示例 - {`${process.env.PUBLIC_URL}/assets/images/cd/logo-dark.png`} - Brajesh Sharma
1

首先查看Chrome Dev中的控制台和网络选项卡错误。

修改package.json中的内容："homepage": "."，重新构建项目并部署。

我将代码更改为<Router history={history} basename="/react">，这解决了我的问题。 - Brajesh Sharma
0
感谢大家，我已经更改了代码为：

<Router history={history} basename="/react">

现在它可以显示组件，并且为了修复图像路径，我使用了"${process.env.PUBLIC_URL}"

对于背景图片，我使用了：

const slider2 = {
          backgroundImage: 'url('+`${process.env.PUBLIC_URL}`+'/assets/images/slideshow/2.jpeg)'
        };
<div className="cd-slide-item" style={slider2}></div>

我使用以下代码来作为图片的src：

<img src={`${process.env.PUBLIC_URL}/assets/images/cd/cd-image-pricing-1.png`} alt=""/>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接