如何让 Django 看到 Vue.js 编译生成的 dist/static 下的文件？

Posted 2023-02-22

【中文标题】如何让 Django 看到 Vue.js 编译生成的 dist/static 下的文件？

【英文标题】：How to let Django see files under dist/static generated by Vue.js compilation?

【发布时间】：2021-03-16 03:47:18

【问题描述】：

我想知道在以下情况下如何为Django指定静态目录。

我根本不使用 Django 模板（我不在 html 文件中使用 % static ... %）。 vue-cli在dist/下生成输出，不在Django项目范围内， 而且我不想改变这一点。 在index.html中，bundle.js被<link href="static/js/bundle.js">加载 想让 Django 看到 index.html 和 static/js 目录下的所有 js 文件。

目录树

root
├── vue_proj
│      └── dist
│           ├── index.html <- SPA, and no Django template in this.
│           └── static <- I wouldd like to let Django see this dir!
│                 └── js
│                      └── bundle.js
└── django_proj <- I executed "django-admin startproject project" here.
       └── project <- I executed "django-admin startapp app" here.
             ├── manage.py
             ├── app 
             └── project
                   ├── settings.py <- What should I do here?

到目前为止，我可以通过设置 TEMPLATES 参数让 Django 看到 dist/index.html 到../vue_proj/dist. 我尝试了以下但导致加载js文件失败...

STATIC_ROOT = '../vue-proj/dist'
STATIC_URL = '/static/'

【参考方案1】：

试试这个

STATICFILES_DIRS = [

    BASE_DIR.parent / "vue-proj/dist/static'",
]

静态根用于生产，它会将你所有的 css 和 js 从静态文件夹收集到静态根目录。

STATIC_ROOT = BASE_DIR.parent / "static_cdn"

【讨论】：

感谢 Ankit 你救了我的命！同时，我可以通过参考***.com/questions/42864641/… 找到让 Vue.js 与 Vue router history-mode 一起工作的方法：)

你好@Pythoner 很高兴听到你得到了解决方案。 (: