ERR_CONNECTION_REFUSED с пакетными файлами Django и Vue.js - PullRequest
2 голосов
/ 30 мая 2019

Я создал простое веб-приложение SPA CRUD с Django, Vue и Docker (-compose).

Поскольку я закончил разработку приложения, я сейчас готовлюсь к производственной среде, то есть к использованию файлов 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 file:

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 или как ее исправить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...