発生している問題
Django REST Framework + Vue.jsで求人情報アプリを構築しよう！ レッスン2
上記動画で学習をしています。
vue.config.jsを作成し、vueとdjangoのサーバーをそれぞれ起動したところ、「Vue JS」h1タグの文字しか表示されず、consoleを確認すると以下エラーが表示されました。
解決方法をご教示願います。
エラーメッセージ
127.0.0.1/:14 GET http://127.0.0.1:8080/bundle.js net::ERR_EMPTY_RESPONSE
自分で試したこと
以下を実施、及び、確認しました。
⓵以下動画でご説明されておりました「vue.config.js」を記述し、npm run serveを実行すると以下エラーが出力されました。ネットで調べたところ、webpack-dev-serverのバージョンによるものかと思い、以下のようにdevServerプロパティを記載し、npm run serveを実行しました。
エラー内容
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options has an unknown property 'disableHostCheck'. These properties are
valid:
vue.config.js
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
publicPath: "http://127.0.0.1:8080/",
outputDir: "./dist/",
devServer: {
hot: "only",
allowedHosts: "all",
static: {
watch: true,
},
https: {
requestCert: false,
},
headers: {
"Access-Control-Allow-Origin": "*"
}
},
chainWebpack : config => {
config.plugin("BundleTracker").use(BundleTracker, [{ filename : "./webpack-status.json"}]);
config.output.filename("bundle.js");
config.optimization.splitChunks(false);
config.resolve.alias.set("__STATIC__", "static");
// config.devServer
// .hotOnly(true)
// .watchOptions({ poll: 1000 })
// .https(false)
// .disableHostCheck(true)
// .headers({ "Access-Control-Allow-Origin" : ["*"] });
},
};
回答 2件
回答するにはログインが必要です
ご回答ありがとうございます。
disableHostCheckのみを削除し、npm run serveを実行したところ、以下エラーが発生しました。
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options has an unknown property 'watchOptions'. These properties are valid:
上記内容は、「django-webpack-loader」のバージョンをチュートリアルと同じく「0.7.0」にして試してみました。
「watchOptions」と「hotOnly」も削除し、npm run serveを実行したところ、正常終了し、djangoとvueの初期画面を同時表示できました。
config.devServer
// .hotOnly(true)
// .watchOptions({ poll: 1000 })
.https(false)
// .disableHostCheck(true)
.headers({ "Access-Control-Allow-Origin" : ["*"] });
ご回答ありがとうございました。
上記削除による影響については、これから自分で調査してみます。
2
disableHostCheckのみ削除するだけでは動かないでしょうか？
config.devServer
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.headers({ "Access-Control-Allow-Origin": ["*"] });
もし動かなかったら、一度バージョンをチュートリアルと同じにして試してみてください。
1