django和vue前后端分离pycharm
时间: 2025-01-24 20:00:36 浏览: 52
### 配置 PyCharm 进行 Django 和 Vue.js 前后端分离开发
#### 创建项目结构
为了实现前后端分离,在 PyCharm 中创建的 Django 项目应具有清晰的前端和后端文件夹划分。通常情况下,Django 的核心组件位于 `backend` 文件夹下[^3]:
```plaintext
.
├── backend/
│ ├── __init__.py
│ ├── admin.py
│ ├── migrations/
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
└── frontend/ (用于放置 Vue.js 应用程序)
```
对于前端部分,则可以单独建立一个名为 `frontend` 或其他名称的文件夹来存放所有的 Vue.js 资源。
#### 安装依赖项
确保安装了必要的 Python 包以及 Node.js 工具链。Python 方面已经确认满足了 Django 的需求[^2]:
```bash
pip install django
npm install vue-cli -g
```
接着可以在 `frontend` 目录内初始化一个新的 Vue.js 项目:
```bash
vue create .
```
这会引导用户完成一系列选项的选择过程,从而构建出适合项目的初始模板。
#### 设置静态资源路径
为了让 Django 正确处理来自 Vue 构建工具生成的静态文件(CSS, JavaScript),需调整 Django 的设置以识别这些位置。编辑 `settings.py` 添加如下配置[^1]:
```python
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "frontend/dist/static",
]
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'bundles/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
}
```
这里假设 Vue 打包后的静态资产会被放在 `frontend/dist/static` 下;而 Webpack 编译的信息则存储于根目录下的 JSON 文件里供 Django 使用。
#### 启动服务
分别启动两套不同的服务器实例——一个是运行在本地主机上的 Django 开发服务器,另一个则是由 Vue CLI 提供的服务。可以通过命令行依次执行以下操作开启它们:
- **Django Server**
```bash
python manage.py runserver
```
- **Vue Development Server**
```bash
cd frontend
npm run serve
```
此时应该能够在浏览器中访问到各自独立运作的应用界面,并通过 API 接口相互交互数据。
阅读全文
相关推荐

















