在django中配置vue

第一步：

• 创建django项目

django-admin startproject mysite

 mysite为项目名，可以随意自定义

第二步：

• 在django项目根目录下创建vue脚手架

• 与manage.py文件同级的位置运行：

vue create frontend

frontend为脚手架的名字，可以随意。

第三步

• settings.py文件中修改以下内容：

TEMPLATES = [
    {
        ''''''
        'DIRS': [BASE_DIR / 'templates'],
        将上面路径修改为下面的路径，frontend表示脚手架名字。
        'DIRS': [BASE_DIR / 'frontend/dist'],  # 修改后，表示django模板从该路径下查找
        ''''''
]


添加：
STATICFILES_DIRS = [
os.path.join(BASE_DIR,"frontend/dist/static"),
]
# 表示项目的静态文件的目录路径

第四步：

• 项目文件中的urls.py文件中添加以下内容：

from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'', TemplateView.as_view(template_name="index.html")),    # 添加
]

第五步：

• 修改vue脚手架的vue.config.js文件：

module.exports = defineConfig({
  '''''
  assetsDir:'static'	// 添加
})

 第六步：

• 对vue脚手架中的文件进行打包

npm run build

最后即可运行django，即可看到vue脚手架中的页面了