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

Posted 2023-02-23

【中文标题】问题将 vue.js 前端与我的 django 后端集成

【英文标题】：Problem integrate a vue.js frontend with my django backend

【发布时间】：2020-07-20 22:51:30

【问题描述】：

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

我使用 webpack loader 将我的 vue.js web-pack-stats 插入到我的 Django 模板中，但是我收到以下错误，我不明白为什么：

我的 Vue.config.js

const BundleTracker = require("webpack-bundle-tracker"); 常量 webpack = require('webpack'); //const isProd = process.env.NODE_ENV === "production"; // 更改它以匹配生产中文件的路径（可能是 S3、CloudFront 等） const DEPLOYMENT_PATH = '/static/dist/' 模块.exports = // 在 Windows 上，您可能需要设置 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', 开发服务器： 公共：'本地主机：8080'， 标题：`在此处输入代码` '访问控制允许来源'：'*'， , , 配置Webpack： // 设置我们在应用程序中使用的所有别名。 插件：[ 新的BundleTracker（路径：__dirname，文件名：'webpack-stats.json'）， 新的 webpack.optimize.LimitChunkCountPlugin( 最大块数：6 ) ] , 普瓦： 名称：'Vue Argon 仪表板'， 主题颜色：'#172b4d', msTileColor: '#172b4d', appleMobileWebAppCapable: '是的', appleMobileWebAppStatusBarStyle: '#172b4d' , CSS： // 启用 CSS 源映射。 sourceMap: process.env.NODE_ENV !== 'production' ;

Django 设置.py：

导入操作系统 # 在项目内部构建路径，如下所示： os.path.join(BASE_DIR, ...) BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # 快速启动开发设置 - 不适合生产 # 见 https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/ # 安全警告：将生产中使用的密钥保密！ SECRET_KEY = 'dd7mv&64-oucgl4_ok1&7f#nr01z2w^5-sxm6l%!&+hu2i+ki#' # 安全警告：不要在生产中打开调试运行！ 调试 = 真 ALLOWED_HOSTS = [] # 应用定义 安装应用程序 = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'django.contrib.sites', 'ERP', '用户', 'rest_framework', 'rest_framework.authtoken', 'rest_auth', 'rest_auth.registration', 'allauth', 'allauth.account', 'allauth.socialaccount', 'crispy_forms', 'webpack_loader', ] 中间件 = [ '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' 模板 = [ 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')], 'APP_DIRS'：是的， '选项'： “上下文处理器”：[ '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' # 数据库 # https://docs.djangoproject.com/en/3.0/ref/settings/#databases 数据库 = '默认'： '引擎': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), # 密码验证 # 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', , ] # 国际化 # https://docs.djangoproject.com/en/3.0/topics/i18n/ LANGUAGE_CODE = 'en-us' TIME_ZONE = 'UTC' USE_I18N = 真 USE_L10N = 真 USE_TZ = 真 LOGIN_URL = "账户/登录/" LOGIN_REDIRECT_URL = "/" LOGOUT_REDIRECT_URL = "/" # 静态文件（CSS、javascript、图像） # https://docs.djangoproject.com/en/3.0/howto/static-files/ STATIC_URL = '/静态/' # 自定义用户模型 AUTH_USER_MODEL = "users.CustomUser" # django-crispy-forms CRISPY_TEMPLATE_PACK = "bootstrap4" # django.contrib.sites 站点 ID = 1 # django-allauth ACCOUNT_EMAIL_VERIFICATION = "无" ACCOUNT_EMAIL_REQUIRED =（真） # Django-REST 框架 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 = '默认'： 'BUNDLE_DIR_NAME': 'dist/', 'STATS_FILE': os.path.join(BASE_DIR, 'vue-argon-dashboard-master', 'webpack-stats.json'),

我从 Django 得到的错误信息：

Django ERROR

谁能帮帮我？

非常感谢！

【问题讨论】：

可能有些东西没有正确配置，但很难弄清楚是什么。您应该向下滚动错误跟踪，找到产生错误的行（webpack_loader/loader.py 第 43 行）并为调用堆栈中的每一行打开“本地变量”窗格，从底部开始向上移动，尝试找出错误值的来源。错误可能在chunk['name'] 中，而chunk 出于某种原因是一个字符串而不是字典。跟随堆叠可能会提供线索。

感谢您的回答，我试图找出错误，但我无法弄清楚错误的原因是什么。我要疯了

【参考方案1】：

我发现了问题所在。

webpack-bundle-tracker 版本有问题

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

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