Question

我已经使用Django，Vue和Docker（-compose）构建了一个简单的SPA CRUD网络应用。

自从我完成了应用程序的开发以来，我现在正在为生产环境做准备，即使用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开发服务器（并且您不需要它），因此遇到了连接被拒绝的错误。

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

1 个答案: