带有Django和Vue.js捆绑文件的ERR_CONNECTION_REFUSED

Question

我使用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_REFUSED错误或如何修复它。

Answer 1

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

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