如何将Vue Cli构建的静态项目集成到Django并适配媒体路径

一、配置Vue项目构建输出路径 #

修改Vue项目根目录下的vue.config.js（无则新建），将构建产物直接输出到Django项目的静态文件目录：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  outputDir: '../your_django_project/static/vue', // 替换为你的Django项目static目录下的vue子文件夹
  assetsDir: 'assets',
  publicPath: '/static/vue/' // 对应Django中STATIC_URL的子路径
})

执行npm run build，构建后的静态文件会自动生成到指定的Django静态目录中。

二、Django项目核心配置调整 #

1. 静态与媒体文件配置（settings.py） #

import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# 静态文件配置
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') # 生产环境静态文件收集目录
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'), # 包含Vue构建产物的static目录
]

# 媒体文件配置
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # 你的媒体文件存储根目录

2. 路由配置（urls.py） #

添加媒体文件服务路由，并配置前端路由的兜底规则，确保所有非API请求返回Vue入口页面：

from django.contrib import admin
from django.urls import path, re_path
from django.views.generic import TemplateView
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    # 你的Django API路由...
    # Vue前端入口，匹配所有非API路径
    re_path(r'^.*$', TemplateView.as_view(template_name='vue/index.html')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # 开发环境媒体文件服务，生产环境建议用Nginx托管

3. 创建Vue入口模板（templates/vue/index.html） #

将Vue构建生成的index.html内容复制到该模板文件中，保留原有的静态资源路径（已通过vue.config.js适配Django的STATIC_URL）。

三、Vue组件媒体路径修改 #

原组件中require加载媒体文件的方式不再适用，媒体文件由Django的MEDIA_URL直接服务，修改视频组件如下：

<template>
  <div class="container-fluid px-0">
    <div class="video-wrapper">
      <!-- 直接用MEDIA_URL拼接视频路径 -->
      <video ref="videoRef" :src="`${process.env.VUE_APP_MEDIA_URL}${videoPath}`" class="video-element" autoplay muted></video>
      <div class="video-caption container">
        <h2 class="RalewayFont multimedia_title" style="color: #F5811C;">{{ videoContent.titulo }}</h2>
        <p class="text-white description_Multimedia RalewayFont ">{{ videoContent.descripcion }}</p>
        <a href="#" class="btn btn-outline-light button_Multimedia RalewayFont" style="border-radius: 50px;" @click="restartVideo">Menú</a>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, inject } from 'vue';

export default {
  setup() {
    const data = inject('$data');
    const videoRef = ref(null);

    const playVideo = () => {
      videoRef.value.play();
    };

    const restartVideo = () => {
      videoRef.value.currentTime = 0;
      videoRef.value.play();
    };

    onMounted(() => {
      videoRef.value.addEventListener('ended', restartVideo);
      playVideo(); // 组件挂载时自动播放视频
    });

    const videoPath = data.Multimedia_Principal[0].video;
    const videoContent = data.Multimedia_Principal[0];

    return {
      videoRef,
      videoPath,
      videoContent,
      restartVideo
    };
  }
};
</script>

在Vue项目根目录的.env.production文件中配置环境变量：

VUE_APP_MEDIA_URL=/media/

四、生产环境部署注意事项 #

1. 收集静态文件：执行python manage.py collectstatic，将所有静态文件（含Vue构建产物）收集到STATIC_ROOT目录。
2. 媒体文件托管：生产环境建议用Nginx或Apache直接托管MEDIA目录，避免Django处理媒体请求，示例Nginx配置片段：

location /media/ {
    alias /path/to/your/django_project/media/;
}

location /static/ {
    alias /path/to/your/django_project/staticfiles/;
}

3. 路由兼容：确保Django的catch-all路由正确返回Vue的index.html，避免页面刷新出现404。

内容的提问来源于stack exchange，提问作者Gustavo Adolfo Pérez Pérez