djangoとvueの初期画面を同時に表示できない。
解決済
回答 2
2022/02/20 19:56
質問内容

発生している問題

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
ベストアンサーを選択すると、解決済みとなります。
nodata
まだ回答がありません
回答
nodata
回答するにはログインが必要です