如何在现有 Laravel 站点中将构建 React 应用程序部署为子域?

2024-01-09

npm run build

我建立一个简单的反应应用程序 https://bucolic-cactus-df8515.netlify.app/;这就是我所看到的build/ folder

jdoe@AIR  ~/Sites/react/alphabets/build   main ±  tree
.
├── asset-manifest.json
├── favicon.png
├── index.html
└── static
    ├── css
    │   ├── main.f05a5dc1.css
    │   └── main.f05a5dc1.css.map
    └── js
        ├── main.cec1e2e8.js
        ├── main.cec1e2e8.js.LICENSE.txt
        └── main.cec1e2e8.js.map

4 directories, 8 files

Since

我还有一个部署的 Laravel 站点。

我想我可以把它放在我的“public/”中并像这样导航到它。

https://www.bunlongheng.com/react/alphabets/ https://www.bunlongheng.com/react/alphabets/

我尝试过 SCP 我的build/ it to public/react/alphabets/build在我的服务器中。

当我访问它时,我没有看到错误,没有禁止,但看到一个白屏。

我需要一种尽可能简单地部署 React 项目的方法,因为我的目标是部署多个......例如。

mysite/react/first-project
mysite/react/second-project
mysite/react/third-project
mysite/react/forth-project

and so on... 

并保留我的主网站...

对我有什么提示吗?我知道我已经很接近了。


您的标题表示为子域,但您的示例网址是子目录/子文件夹。所以我假设你的意思是如何将 React 应用程序构建为子目录。

空白页表示资源未加载,因为资源路径使用根路径(/)。要更改基本路径,您只需添加basename到您的路由器:

<Router basename={'/react/alphabets/build'}>
  <Route path='/' component={Home} />
</Router>

而且你还需要添加homepage到 package.json。例子:

{
  "name": "react-example",
  "homepage": "/react/alphabets/build",

或者您需要移动/复制的另一种方式public/react/alphabets/build/static to public/static/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在现有 Laravel 站点中将构建 React 应用程序部署为子域? 的相关文章

随机推荐

  • 如何在没有 Grails 的情况下创建 GSP 标记库

    我们可以在没有 Grails 的情况下使用 GSP 只需映射 servletgroovy servlet TemplateServlet 那么 TagLib 又如何呢 Here are http grails org doc latest
  • 从 Google 云端硬盘下载图像文件

    我正在将图像文件上传到 Google Drive SDK 然后尝试下载回相同的图像 我查看了 Google Drive Developer 示例中下载文件的示例 但它们仅向我们展示了如何从文件中下载文本 我该如何下载图像 该文件是 Goog
  • htmlpurifier 删除内联 css

    我正在使用 htmlpurifier 来清理用户内容 我正在尝试删除内联样式属性 例如 div some text div 我想删除整个样式属性 如何使用 htmlpurifier 做到这一点 您可以调整允许的属性 http htmlpur
  • 用于删除所有用户桌面上的所有图标的批处理脚本

    目前正在寻找一种方法来删除所有用户桌面上的所有图标 我一直在尝试 直到我制作了以下脚本 该脚本允许我从单个用户中删除所有内容 但如果没有硬编码 我将无法扩展它以覆盖单个 PC 上的所有用户 echo off cd del C Users U
  • 通过启动进程运行 cmd.exe 但无法将命令传递给 cmd.exe

    我想运行一个常规脚本cmd exe在不同的用户下 我用过Start Process 当脚本执行时 它只是用不同的用户在屏幕上打开提示 但不处理 command 所以我的问题是 运行后如何传递命令cmd exe使用 PowerShell 这是
  • Gmail 作为 JavaMail SMTP 服务器

    我一直在使用 JavaMail API 以 Gmail 作为我的主机 并对如何使用它发送电子邮件有一个大致的了解 但有两行代码仍然让我困惑 message setFrom new InternetAddress USERNAME API 表
  • 条件面板闪亮(似乎不起作用)

    有人可以帮我解决以下闪亮的问题吗 我需要制作一个条件面板 但在这里我不希望它出现 除非有人选择女性 然而 当我运行此代码时 条件面板出现在页面中 任何帮助都感激不尽 selectInput gender What is your gende
  • 检测 mysqli 准备好的语句中的错误[重复]

    这个问题在这里已经有答案了 我有一个自定义错误处理程序 但我需要知道在准备好的语句中测试错误的位置 我有测试吗prepared bind execute and store result 阶段还是仅选择阶段 statement databa
  • 为什么 StackPanel 不垂直拉伸其子级?

    WPF 新手 我正在查看 WPF 示例
  • 如何清理 InlineFormSet 中的某个字段?

    我需要清理内联表单集中的特定字段 但我不知道该怎么做 我尝试过使用表单集def clean self 方法但不知道在哪里保存清理后的值 如果我尝试将清理值设置为forms 0 data field 我收到 此 QueryDict 实例是不可
  • Laravel 5 应用程序始终使用“测试”环境配置

    我有一个 Laravel 5 应用程序 它有两个环境和两个配置 测试 用于 PHPUnit 配置 内存数据库 和本地 我的开发配置 即使环境配置为local 应用程序仅加载配置resources config testing文件夹 我可以从
  • 如何在 Windows 上配置 theano?

    我已经在 Windows 机器上安装了 Theano 并按照配置进行操作指示 http deeplearning net software theano library config html 我将以下 theanorc txt 文件放置在
  • 如何在 G Suite 上通过同意屏幕请求全域委派

    我需要访问公司的日历信息G Suite账户 通过API与公司系统同步数据 当我需要提供对我自己的数据的访问时 有一个相当好的方法简单的方法 https developers google com calendar auth去做吧 使用 Oa
  • 使用 tcpdump 监控流量时丢失 UDP 片段

    我所在的本地 LAN 上只有 8 台连接的计算机 使用 netgear 24 端口千兆位交换机 网络负载非常低 所有相关节点 运行 slackware 11 上的发送 接收缓冲区已设置为 16mb 我还在每个节点上运行 tcpdump 来监
  • Java 易失性是否会阻止缓存或强制执行直写式缓存?

    我正在尝试理解Javavolatile关键词关于writing具有 CPU 缓存的多线程程序中的易失性原子变量 我读过一些教程和 Java 语言规范 特别是第 17 4 5 节 在订购之前发生 http docs oracle com ja
  • 多表选择与 JOIN(性能)[重复]

    这个问题在这里已经有答案了 当从 MySQL 中的多个表中进行选择时 以下两个查询都会返回相同的结果集 是这些查询之一better或者比其他更有效率 根据我对一个小数据集 每个表中约 2k 行 的测试 它们都在大约相同的执行时间内返回相同的
  • 如何使用 Vuex 模块发布 Vue.js NPM 包?

    我正在开发一些 Vue 组件 我想将它们放入 NPM 包中 我面临的问题是我不知道如何发布依赖于 Vuex 模块的组件 我已经将这个组件库所需的所有代码整齐地放置到一个单独的 Vuex 模块中 但是当有人导入我的包时 如何注册我的模块 我猜
  • 如何让我的 NodeJS 应用程序永远循环运行

    我编写了一个 NodeJS 应用程序 它调用 API 并仅在工作日的特定时间发布到端点 我可以设置一个 cron 作业来在指定时间运行应用程序 但我更喜欢使用node index js让它不断运行 什么也不做 直到合适的日期和时间 然后回到
  • 如何在导航组件中从Dialog导航到Fragment?

    我正在尝试从DialogFragment to Fragment在导航组件中 但得到奇怪的结果 当我从DialogFragment to Fragment 背景片段正在更改为目标片段 当前对话框位于其顶部 而不仅仅是移动到目标片段 这是导航
  • 如何在现有 Laravel 站点中将构建 React 应用程序部署为子域?

    npm run build 我建立一个简单的反应应用程序 https bucolic cactus df8515 netlify app 这就是我所看到的build folder jdoe AIR Sites react alphabets