JSONDecodeError в '/' @ {% render_bundle 'app'%}

Question

Моя цель - заставить интерфейс VueJS работать с моим бэкэндом DRF.

Я почти сошел с ума с этим, я не могу заставить работать webpack-bundle-tracker, чтобы спасти мою жизнь, в настоящее время я борюсь с ошибкой, которую я понятия не имею, что это значит .. .

Expecting value: line 1 column 1 (char 0)
at {% render_bundle 'app' %}

Есть ли у кого-нибудь какой-либо ресурс, где я могу научиться или упростить этот процесс? Я нахожусь в точке, где все, что мне нужно сделать, это соединить мой передний и задний конец, и немного расстраивает наличие такого массивного дорожного блока, где я не ожидал, что он будет один.

Итак, я сейчас попробовал и Vue-Resource, и django-cors-headers, чтобы попытаться заставить его работать, однако я получаю ошибку перекрестной ссылки на источник (403 Запрещено, Django не разрешает мне обращаться к нему по URL-адресу без того же происхождения)

Сейчас я пытаюсь использовать Axios, webpack-bundle-tracker и django-webpack-loader, но не так много информации о том, как настроить это с помощью Vue, и несколько найденных мной уроков, похоже, не охватывают аутентификацию, или просто не работает.

vue.config.js

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
    baseUrl: "http://0.0.0.0:8080/",
    outputDir: './dist/',

    chainWebpack: config => {

        config.optimization
            .splitChunks(false)

        config
            .plugin('BundleTracker')
            .use(BundleTracker, [{filename: '../frontend/webpack-stats.json'}])

        config.resolve.alias
            .set('__STATIC__', 'static')

        config.devServer
            .public('http://0.0.0.0:8080')
            .host('0.0.0.0')
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .headers({"Access-Control-Allow-Origin": ["\*"]})
    }
};