读取 webpack-stats.json 时出错。你确定 webpack 已经生成了文件并且路径是正确的吗？答案

【问题标题】：Error reading webpack-stats.json. Are you sure webpack has generated the file and the path is correct?读取 webpack-stats.json 时出错。你确定 webpack 已经生成了文件并且路径是正确的吗？
【发布时间】：2022-06-20 00:36:51
【问题描述】：

我用 Vue 安装了 django，在运行时遇到了这个错误：

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

与 manage.py 一起：

vue create frontend

默认（[Vue 3] babel，eslint）

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

6.14.15

nodejs --version

v10.19.0

node --version

v14.17.6

npm list webpack-bundle-tracker

└── webpack-bundle-tracker@1.5.0

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>

【问题讨论】：

你好@namjoo，权限设置正确吗？你可以用ls -l查看它，运行你的服务器的用户可能没有读/写文件的正确权限。
你好@Gwendal。谢谢。是的，所有权限设置正确。

标签： django vue.js npm webpack vuejs3

【解决方案1】：

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

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' }),
    ],
  },
})

【讨论】：

【解决方案2】：

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 run serve之前运行npm run build

【讨论】：