vue打包至django集成运行中遇到的问题

我们要实现的目标是 在vue项目中
npm run build生成的dist目录放在django项目中同django项目一起运行

在vue.config.js的module.exports中加入一行
因为如果不配置这个的话静态资源直接生成在nodejs打包后的dist目录
django无法直接调用到，只能在dist下新建一个目录进行调用
assetsDir: 'static',

在django的setting.py中配置

TEMPLATES = [
    {
        .....
        'DIRS': [BASE_DIR / 'dist']
		.....
	}

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'dist/static'),]

urls.py文件

from django.views.generic import TemplateView

urlpatterns = [
    path('', TemplateView.as_view(template_name="index.html")),
]

配置好后直接run项目即可

可能还会遇见浏览器空白，这个报错

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

解决办法

setting.py 加入

import mimetypes

mimetypes.add_type('text/css', '.css')
mimetypes.add_type('application/javascript', '.js')

之后清空浏览器缓存重新读取页面