Question

我在将vue.js前端与Django后端集成时遇到问题。

我使用webpack加载程序将vue.js web-pack-stats插入Django模板中，但是出现以下错误，我不明白为什么：

我的Vue.config.js



     const BundleTracker = require("webpack-bundle-tracker");
        const webpack = require('webpack');
        //const isProd = process.env.NODE_ENV === "production";

        // Change this to match the path to your files in production (could be S3, CloudFront, etc.)
        const DEPLOYMENT_PATH = '/static/dist/'


        module.exports = {
            // on Windows you might want to set publicPath: "http://127.0.0.1:8080/" 
            publicPath: process.env.NODE_ENV === 'production' ? DEPLOYMENT_PATH : 'http://127.0.0.1:8080/',
            outputDir: '../CodeGeniusERP/static/dist',


            devServer: {
                public: 'localhost:8080',
                headers: {`enter code here`
                    'Access-Control-Allow-Origin': '*',
                },
            },


            configureWebpack: {
                // Set up all the aliases we use in our app.
                plugins: [
                    new BundleTracker({ path: __dirname, filename: 'webpack-stats.json' }),
                    new webpack.optimize.LimitChunkCountPlugin({
                        maxChunks: 6
                    })
                ]
            },
            pwa: {
                name: 'Vue Argon Dashboard',
                themeColor: '#172b4d',
                msTileColor: '#172b4d',
                appleMobileWebAppCapable: 'yes',
                appleMobileWebAppStatusBarStyle: '#172b4d'
            },
            css: {
                // Enable CSS source maps.
                sourceMap: process.env.NODE_ENV !== 'production'
            }
        };

Django settings.py：


    import os

    # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


    # Quick-start development settings - unsuitable for production
    # See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/

    # SECURITY WARNING: keep the secret key used in production secret!
    SECRET_KEY = 'dd7mv&64-oucgl4_ok1&7f#nr01z2w^5-sxm6l%!&+hu2i+ki#'

    # SECURITY WARNING: don't run with debug turned on in production!
    DEBUG = True

    ALLOWED_HOSTS = []


    # Application definition

    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'django.contrib.sites',

        'ERP',
        'users',

        'rest_framework',
        'rest_framework.authtoken',

        'rest_auth',
        'rest_auth.registration',

        'allauth',
        'allauth.account',
        'allauth.socialaccount',

        'crispy_forms',
        'webpack_loader',
    ]

    MIDDLEWARE = [
        'django.middleware.security.SecurityMiddleware',
        'django.contrib.sessions.middleware.SessionMiddleware',
        'django.middleware.common.CommonMiddleware',
        'django.middleware.csrf.CsrfViewMiddleware',
        'django.contrib.auth.middleware.AuthenticationMiddleware',
        'django.contrib.messages.middleware.MessageMiddleware',
        'django.middleware.clickjacking.XFrameOptionsMiddleware',
    ]

    ROOT_URLCONF = 'CodeGeniusERP.urls'

    TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            'DIRS': [os.path.join(BASE_DIR, 'templates')],
            'APP_DIRS': True,
            'OPTIONS': {
                'context_processors': [
                    'django.template.context_processors.debug',
                    'django.template.context_processors.request',
                    'django.contrib.auth.context_processors.auth',
                    'django.contrib.messages.context_processors.messages',
                ],
            },
        },
    ]

    WSGI_APPLICATION = 'CodeGeniusERP.wsgi.application'


    # Database
    # https://docs.djangoproject.com/en/3.0/ref/settings/#databases

    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.sqlite3',
            'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
        }
    }


    # Password validation
    # https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators

    AUTH_PASSWORD_VALIDATORS = [
        {
            'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
        },
        {
            'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
        },
        {
            'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
        },
        {
            'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
        },
    ]


    # Internationalization
    # https://docs.djangoproject.com/en/3.0/topics/i18n/

    LANGUAGE_CODE = 'en-us'

    TIME_ZONE = 'UTC'

    USE_I18N = True

    USE_L10N = True

    USE_TZ = True

    LOGIN_URL = "accounts/login/"
    LOGIN_REDIRECT_URL = "/"
    LOGOUT_REDIRECT_URL = "/"


    # Static files (CSS, JavaScript, Images)
    # https://docs.djangoproject.com/en/3.0/howto/static-files/

    STATIC_URL = '/static/'


    #   Custom User Model
    AUTH_USER_MODEL = "users.CustomUser"

    #   django-crispy-forms
    CRISPY_TEMPLATE_PACK = "bootstrap4"

    #   django.contrib.sites
    SITE_ID = 1

    #   django-allauth
    ACCOUNT_EMAIL_VERIFICATION = "none"

    ACCOUNT_EMAIL_REQUIRED = (True)

    #   Django-REST-Framework
    REST_FRAMEWORK = {
        'DEFAULT_AUTHENTICATION_CLASSES':(
            'rest_framework.authentication.TokenAuthentication',
            'rest_framework.authentication.SessionAuthentication',     
        ),
          'DEFAULT_PERMISSION_CLASSES':(
            'rest_framework.permissions.IsAuthenticated',
          ),
          'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
          'PAGE_SIZE': 2
    }


    WEBPACK_LOADER =  {
        'DEFAULT':{
            'BUNDLE_DIR_NAME': 'dist/',
            'STATS_FILE': os.path.join(BASE_DIR, 'vue-argon-dashboard-master', 'webpack-stats.json'),
        }
    }

我从Django得到的错误消息：

Django ERROR

有人可以帮助我吗？

非常感谢！

Answer 1

我发现了问题所在。

webpack-bundle-tracker的版本有问题

仅在前端文件夹中解决问题：

npm install --save-dev webpack-bundle-tracker@0.4.3

问题将vue.js前端与我的django后端集成

1 个答案: