创建react应用程序构建在LAMP/XAMPP/WAMP上部署

默认情况下,react项目构建为直接部署到服务器“www”(根)文件夹中。因此,您可以将项目“build”文件夹的内容复制到WAMP“www”文件夹,然后转到 http://localhost/ 在浏览器中。将显示您的项目。

或者,您可能需要使用WAMP根目录 子文件夹 ,例如“www/react/”。 在这种情况下,添加到您的包中。json文件a 主页 密钥:

"homepage": "http://localhost/react/",

然后再次构建项目:

npm run build

最后,将项目“build”文件夹的内容复制到“www/react/”。显示项目访问 http://localhost/react/

您可以在中获得更多信息 How to deploy a React App on Apache web server

在htdocs(xampp)中创建一个名为react的文件夹。

添加“homepage”:“../”,(用于相对路径)或“homepage”:http://localhost/react/“,(绝对路径)在package.json文件中。

和应用程序上。js文件

<BrowserRouter basename='/react'>
  <Switch>
    <Route exact path="/">
      Hello
    </Route>
    <Route path="*" render={() => "404 Not found!"} />
  </Switch>
</BrowserRouter>

配置包后。json和应用程序。js run build命令

npm run build

然后将所有文件从build文件夹复制到htdocs中的react文件夹。

并创建一个。htdocs中react文件夹中的htaccess。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

如果子文件夹名称不同,请用文件夹名称替换/反应。

示例-重命名/反应自

"homepage": "http://localhost/react/"  
<BrowserRouter basename='/react'>

到

"homepage": "http://localhost/your_folder_name/"
<BrowserRouter basename='/your_folder_name'>

您需要为构建配置主页。

在上设置basename属性。

<Router basename={'/directory-name'}>
    <Route path='/' component={Home} />
</Router>

目录名称 是xampp htdocs文件夹下的文件夹名