How to let Django see files under dist/static generated by Vue.js compilation?

Viewed 160

I'd like to know how to specify static directory for Django in the following case.

  • I don't use Django template at all (I don't use {% static ... %} in html file).
  • vue-cli generates outputs under dist/, which is not in the scope of Django project, and I don't like to change this.
  • In index.html, bundle.js is loaded by <link href="static/js/bundle.js">
  • Would like to let Django see index.html and all js files under static/js dir.

Directory tree

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?

So far I could let Django see dist/index.html by setting TEMPLATES parameter to ../vue_proj/dist.
I tried the follows but resulted in failure of loading js files...

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

try this

STATICFILES_DIRS = [

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

static root is use for production it will collect all your css and js from static folder to static root dir.

STATIC_ROOT = BASE_DIR.parent / "static_cdn"
Related