有没有办法在同一项目中运行 React + Django，而无需一次又一次地运行 npm run build?

Question

我对 Django 有足够的了解，最近学习了 act，我喜欢将两者结合起来。

我已经浏览了几个视频教程，并成功地集成了它们。

但问题是我应该在两个不同的项目中构建一个 REST API 和一个 React 应用程序，并将它们组合在一起，或者每次在前端进行任何更改时都需要运行npm run build。

所以如果有人有替代方案(在 Django 服务器上连续运行 React 而不一次又一次地运行build(，请告诉我。

Answer 1

在你的package.json文件中，会有如下脚本标签，

"scripts": {
"dev": "webpack  --mode development ./src/index.js --output ./static/frontend/main.js",
"build": "webpack --mode production ./src/index.js --output ./static/frontend/main.js"
},

使用开发脚本添加--watch标签，如下所示，

"scripts": {
"dev": "webpack --watch --mode development ./src/index.js --output ./static/frontend/main.js",
"build": "webpack --mode production ./src/index.js --output ./static/frontend/main.js"
},

然后做npm run dev

所以JS将运行而不会中断。即使您更改 React 中的文件，它也会自动更新并运行。

文件结构可能因项目而异，但逻辑是相同的

Answer 2

我刚刚找到了一种最简单的方法在使用 react 时继续使用 django apis

第 1 步 -> 只需 npm 在 react 目录中运行你的 react 项目

npm run start

您将看到开发服务器默认从 Local： 在 http://localhost:3000 启动

---

step 2 ->移动到你的 django项目目录并在另一个终端中启动你的django服务器

python manage.py runserver

默认情况下，这将在 http://127.0.0.1:8000/启动你的 Django

---

现在无论你在哪里使用 axios 或其他捆绑包在同一端口从 Django 获取 API，只需在其 URL 的开头添加 http://127.0.0.1:8000/

**您现在可能会看到一个错误，指出 3000 端口不允许 CORS 标头，但不要担心，只需再执行几个步骤**

第 3 步 ->转到你的 Django 目录并写入

pip install django-cors-header

步骤4 ->现在转到Django项目的设置文件并进行以下更改，如下所示：

INSTALLED_APPS = [
...
'corsheaders',
...
]
MIDDLEWARE=[
...
'corsheaders.middleware.CorsMiddleware',
...
]
CORS_ALLOWED_ORIGINS = [
'http://localhost:3000',
]

感谢标记此答案有用！ 😁 以及任何查询评论