Django+Vue+Docker生产环境加载bundle文件遇ERR_CONNECTION_REFUSED错误求助

你这是踩了开发环境切换到生产环境时的典型配置坑——Vue打包配置还停留在开发模式的资源路径设置上，导致生产环境里浏览器一个劲请求不存在的dev server地址（0.0.0.0:8080）。下面是具体的排查和修复步骤：

1. 修正Vue的publicPath配置 #

你的vue.config.js里publicPath硬编码成了开发环境的dev server地址，这在生产环境完全不适用，因为此时根本没有8080端口的服务在运行。修改这个核心配置：

// vue.config.js
module.exports = {
    // 替换原来的http://0.0.0.0:8080/
    publicPath: '/static/', // 和Django的STATIC_URL保持一致
    // ... 保留其他原有配置
}

如果你的Django部署时STATIC_URL不是/static/，请对应调整这个值。用相对路径./也可以，但更推荐和Django的静态资源路径对齐，避免后续路径混乱。

2. 重新执行打包命令 #

修改配置后，重新打包Vue项目：

npm run build

此时生成的webpack-stats.json里的资源路径会变成/static/bundle.js和/static/bundle.css，而不再指向8080的无效地址。

3. 完善Django生产环境静态资源配置 #

生产环境下，Django需要通过collectstatic把所有静态文件（包括Vue打包后的dist目录内容）收集到统一目录，方便nginx或其他web服务器提供服务：

# settings.py
# 取消注释并配置STATIC_ROOT
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

然后执行收集命令：

python manage.py collectstatic

这一步会把STATICFILES_DIRS里的所有文件复制到STATIC_ROOT指定的目录，确保生产环境中静态资源能被正确访问。

4. 验证模板中的资源加载方式 #

确保你在Django模板里是通过webpack_loader的标签加载资源，而不是硬编码路径：

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
<head>
    {% render_bundle 'main' 'css' %}
</head>
<body>
    <div id="app"></div>
    {% render_bundle 'main' 'js' %}
</body>
</html>

这样webpack_loader会自动根据webpack-stats.json里的正确路径加载资源，不会出现硬编码的错误地址。

为什么原来的配置会失败？ #

开发环境中，Vue的dev server在8080端口运行，通过热重载提供资源，所以publicPath指向这个地址是正常的。但生产环境下，我们已经把Vue打包成静态文件，这些文件需要由Django的静态资源服务（或反向代理服务器）来提供，此时再指向8080端口自然会出现连接拒绝的错误——因为这个端口根本没有服务在运行。

内容的提问来源于stack exchange，提问作者Xar