ERR_CONNECTION_REFUSED 与 Django 和 Vue.js 捆绑文件答案

【问题标题】：ERR_CONNECTION_REFUSED with Django and Vue.js bundle filesERR_CONNECTION_REFUSED 与 Django 和 Vue.js 捆绑文件
【发布时间】：2019-10-15 21:13:06
【问题描述】：

我已经使用 Django、Vue 和 Docker(-compose) 构建了一个简单的 SPA CRUD Web 应用程序。

由于我已经完成了应用程序的开发，我现在正在准备生产环境，即使用bundle.js和bundle.css文件。

当我尝试加载主页时，http://localhost:8000，没有 CSS 或 JS 正在加载，因为我在浏览器的控制台中收到此错误：

GET http://0.0.0.0:8080/bundle.css net::ERR_CONNECTION_REFUSED
GET http://0.0.0.0:8080/bundle.js net::ERR_CONNECTION_REFUSED

我真的不知道它为什么会给出这个错误或如何修复它。

这是我的 vue.config.js 文件：

const webpack = require("webpack");
const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  publicPath: "http://0.0.0.0:8080/",
  outputDir: "./dist/",
  filenameHashing: false,

  configureWebpack: {
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
      })
    ]
  },

  chainWebpack: config => {
    config
      .plugin("BundleTracker")
      .use(BundleTracker, [{ filename: "./webpack-stats.json" }]);

    config.output.filename("bundle.js");

    config.optimization.splitChunks(false);

    config.optimization.delete("splitChunks");

    config.resolve.alias.set("__STATIC__", "static");

    config.devServer
      .hotOnly(true)
      .watchOptions({ poll: 1000 })
      .https(false)
      .disableHostCheck(true)
      .headers({ "Access-Control-Allow-Origin": ["*"] });
  },

  // uncomment before executing 'npm run build'
  css: {
    extract: {
      filename: "bundle.css",
      chunkFilename: "bundle.css"
    }
  }
};

这是我的 settings.py 文件的一部分：

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "assets"),
    os.path.join(BASE_DIR, "frontend/dist"),
]

# STATIC_ROOT = ""  # The absolute path to the dir for collectstatic

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

当我运行 npm run build 命令时，我收到通知，bundle.css 和 bundle.js 文件都已生成：

  File               Size                        Gzipped

  dist/bundle.js     150.73 KiB                  51.05 KiB
  dist/bundle.css    192.06 KiB                  26.89 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

我真的不知道为什么它会给出 ERR_CONNECTION_REFUSEDerror 或如何解决它。

【问题讨论】：

Django docs.djangoproject.com/en/2.2/howto/deployment/checklist Vue cli.vuejs.org/guide/deployment.html
你能解决这个问题吗？我有同样的问题，我无法解决？

标签： django docker vue.js webpack

【解决方案1】：

对于生产，请从您的 vue 配置文件中删除 publicPath，我想您将其用于开发目的，但在生产中您应该只创建捆绑包并将其提供给用户。

可能发生的情况是，在您的 Docker 设置中，您没有运行 webpack 开发服务器（并且您不需要它），因此您遇到了连接被拒绝的错误。

【讨论】：