django - 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 ，我想您将其用于开发目的，但在生产中，您应该只创建 bundle 并将其提供给用户。

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