当前位置：文江博客话题详情

npm Vue.js Webpack Django vuejs3

错误阅读webpack-stats.json。您确定WebPack已生成文件并且路径正确吗？

发布于 2025-01-30 18:39:15 字数 1830 浏览 0 评论 0原文

我与Vue一起安装了Django，并在运行时获得了此EROR：

Error reading webpack-stats.json. Are you sure webpack has generated the file and the path is correct?

vue create frontend

cd frontend
npm run serve

babel.config.js
jsconfig.json
node_modules
package.json
package-lock.json
public
README.md
src
vue.config.js


npm --version

nodejs --version

node --version

.17.6└──

npm list webpack-bundle-tracker

pip install django-webpack-loader
pip freeze

ango-webpack-loader == 1.5.0

INSTALLED_APPS = (
  ...
  'webpack_loader',
  ...
)


# vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

index.html

{% load render_bundle from webpack_loader %}
{% load static %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title></title>    

    {% render_bundle 'app' 'css' %}
  </head>
  <body>
            <div class="main">
                <main>
                  <div id="app">
                    
                  </div>
                    {% endblock %}
                </main>
            </div>
    {% render_bundle 'app' 'js' %}
  </body>
</html>

I installed django with Vue and got this eror in runtime:

Error reading webpack-stats.json. Are you sure webpack has generated the file and the path is correct?

alongside manage.py:

vue create frontend

Default ([Vue 3] babel, eslint)

cd frontend
npm run serve

list of files in frontend directory is:

babel.config.js
jsconfig.json
node_modules
package.json
package-lock.json
public
README.md
src
vue.config.js


npm --version

6.14.15

nodejs --version

v10.19.0

node --version

v14.17.6

npm list webpack-bundle-tracker

└── [email protected]

pip install django-webpack-loader
pip freeze

django-webpack-loader==1.5.0

INSTALLED_APPS = (
  ...
  'webpack_loader',
  ...
)


# vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

index.html

{% load render_bundle from webpack_loader %}
{% load static %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title></title>    

    {% render_bundle 'app' 'css' %}
  </head>
  <body>
            <div class="main">
                <main>
                  <div id="app">
                    
                  </div>
                    {% endblock %}
                </main>
            </div>
    {% render_bundle 'app' 'js' %}
  </body>
</html>

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

空气里的味道 2025-02-06 18:39:15

vue.config.js


const { defineConfig } = require('@vue/cli-service')
const BundleTracker = require('webpack-bundle-tracker')

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production' ? '/static/dist/' : 'http://localhost:8080',
  outputDir: '../static/dist',
  indexPath: '../templates/index.html',
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new BundleTracker({ path: __dirname, filename: 'webpack-stats.json' }),
    ],
  },
})

文件结构是：

mainapp/
frontend/
   vue.gonfig.js
   package.json
   webpack-stats.json
static/
template/
manage.py

我也运行npm运行构建 npm运行服务

settings.py：

STATIC_URL = '/static/'
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'assets')
]

WEBPACK_LOADER = {
  'DEFAULT': {
    'CACHE': not DEBUG,
    'BUNDLE_DIR_NAME': '/bundles/',
    'STATS_FILE': os.path.join(BASE_DIR,'frontend', 'webpack-stats.json'),
    'POLL_INTERVAL': 0.1,
    'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
  }
}

vue.config.js


const { defineConfig } = require('@vue/cli-service')
const BundleTracker = require('webpack-bundle-tracker')

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production' ? '/static/dist/' : 'http://localhost:8080',
  outputDir: '../static/dist',
  indexPath: '../templates/index.html',
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new BundleTracker({ path: __dirname, filename: 'webpack-stats.json' }),
    ],
  },
})

files structure are:

mainapp/
frontend/
   vue.gonfig.js
   package.json
   webpack-stats.json
static/
template/
manage.py

also i run npm run build before npm run serve

settings.py:

STATIC_URL = '/static/'
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'assets')
]

WEBPACK_LOADER = {
  'DEFAULT': {
    'CACHE': not DEBUG,
    'BUNDLE_DIR_NAME': '/bundles/',
    'STATS_FILE': os.path.join(BASE_DIR,'frontend', 'webpack-stats.json'),
    'POLL_INTERVAL': 0.1,
    'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
  }
}

回复收藏 0 原文

心的憧憬 2025-02-06 18:39:15

您需要导入并添加webpack-bundle-tracker插件vue.config.js：

const { defineConfig } = require('@vue/cli-service')
const BundleTracker = require('webpack-bundle-tracker')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new BundleTracker({ path: __dirname, filename: 'webpack-stats.json' }),
    ],
  },
})

You need to import and add the webpack-bundle-tracker plugin in vue.config.js:

const { defineConfig } = require('@vue/cli-service')
const BundleTracker = require('webpack-bundle-tracker')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new BundleTracker({ path: __dirname, filename: 'webpack-stats.json' }),
    ],
  },
})

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

文章

评论

25 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

自我难过

文章 0 评论 0

dianjvnan

文章 0 评论 0

深居我梦

文章 0 评论 0

酒几许

文章 0 评论 0

把人绕傻吧

文章 0 评论 0

脸赞

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文