如何将React App发布至网站？含Squarespace与WordPress部署方法

第一步：先打包你的React应用 #

不管部署到哪个平台，首先要把React项目转换成可直接发布的静态文件：

• 在VS Code的终端中运行命令：npm run build
• 执行完成后，项目根目录会生成一个build文件夹，里面包含所有静态资源（HTML、CSS、JS、图片等）。

部署到Squarespace #

方法：嵌入到Squarespace页面 #

1. 登录你的Squarespace后台，进入目标网站的编辑模式。
2. 创建或打开要放置React应用的页面，添加一个代码块（Code Block）。
3. 打开build文件夹里的index.html文件，复制其中的全部代码。
4. 将复制的代码粘贴到代码块的「HTML」标签页中，点击保存。
5. 处理静态资源：
   • 进入Squarespace后台的「设置」→「高级」→「文件存储」，上传build文件夹里static目录下的所有CSS、JS、图片文件。
   • 回到代码块的HTML内容，把里面的相对资源路径（比如/static/css/main.xxx.css）替换成Squarespace文件存储中对应文件的完整URL（上传后可在文件列表中复制链接）。
6. 发布页面，即可通过Squarespace的页面地址访问你的React应用。

部署到WordPress #

方法1：嵌入到WordPress页面 #

1. 登录WordPress后台，进入「媒体」→「添加新媒体」，上传build文件夹里static目录下的所有CSS、JS、图片资源，记住每个文件的完整URL（上传后可在媒体库中查看并复制）。
2. 创建或编辑目标页面，添加一个自定义HTML区块。
3. 打开build里的index.html文件，复制全部内容，然后把内容里的相对资源路径替换成媒体库中对应文件的完整URL。
4. 将修改后的HTML粘贴到自定义HTML区块中，更新页面。访问该页面就能看到你的React应用了。

方法2：使用插件简化操作（可选） #

如果你觉得手动替换路径麻烦，可以用Insert HTML Snippet这类插件：

• 安装并激活插件后，新建一个代码片段，粘贴修改好路径的index.html内容。
• 在页面中插入该代码片段即可完成部署。

内容的提问来源于stack exchange，提问作者DCooper7