Creé una aplicación web SPA CRUD simple con Django, Vue y Docker (-compose).
Como terminé de desarrollar la aplicación, ahora me estoy preparando para el entorno de producción, es decir, usando los archivos bundle.js y bundle.css .
Cuando intento cargar la página principal, http://localhost:8000 , no se cargan CSS ni JS porque recibo este error en la consola del navegador:
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_REFUSEDRealmente no sé por qué está dando ese error o cómo solucionarlo.
Este es mi archivo 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" } } };Esto es parte de mi archivo 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'), } } Cuando ejecuto el comando npm run build , recibo una notificación de que se generaron los archivos bundle.css y 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 Realmente no sé por qué está dando ese error ERR_CONNECTION_REFUSED o cómo solucionarlo.
Para producción, elimine publicPath de su archivo de configuración de vue, supongo que lo usó para fines de desarrollo, pero en producción solo debe crear el paquete y entregarlo al usuario.
Lo que probablemente sucede es que en su configuración de Docker no tiene el servidor de desarrollo webpack ejecutándose (y no lo necesita), por lo que se encuentra con un error de conexión rechazada.