Я создал простое веб-приложение 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
или как ее исправить.