Static files load when DEBUG=True (locally and at the dev server), but not when DEBUG=False (production).

STATICFILES_DIRS is set to my dist dir created by Vue, and dist is not in the .gitignore. Heroku runs collectstatic on every deploy by default (I have not changed this).

The actual error is a 404 when trying to load any static file. The whitenoise package is being used. I've updated the middleware settings, and wsgi.py according to the docs, and have the settings variable which enables compression via whitenoise set (also according to the whitenoise docs).

whitenoise usually works fine with other apps. I'm not sure what's wrong with this. The difference is that I'm using Vue for the first time. I'd never used a js framework before.

When setting DEBUG=False locally, staticfiles still load fine, so I am unable to debug in that way.

Can anyone help?

CodePudding user response：

If one hasn't done already, then in ones settings.py add the STATIC_ROOT variable with value corresponding to the full absolute path to your static files folder. This is important because one is defining a folder for ones static files to go into. Something like this

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

STATIC_URL = '/static/'

if not DEBUG:
    STATIC_ROOT = 'os.path.join(BASE_DIR, 'staticfiles')

When in the question OP mentions that OP added STATICFILES_DIRS, that's great but that is used to include additional directories for collectstatic. More about it here.

Once that's done, do a new build and Heroku should run collectstatic to collect the static to the STATIC_ROOT folder. If the build fails, then collectstatic was unsuccessful. In order to diagnose the problem, Heroku provides a traceback,

$ heroku config:set DEBUG_COLLECTSTATIC=1

CodePudding user response：

django-heroku was the problem. In my settings I was using django-heroku. Removing it got staticfiles to load at production.