Vue.jsとDjango REST Frameworkで画面が真っ白になる原因〜2〜


press
Vue.jsとDjango REST Frameworkで画面が真っ白になる原因〜2〜

Vue.jsとDjango REST Frameworkで画面が真っ白になる原因〜2〜

Django REST Frameworkと組み合わせたVue.jsで、ビルド後にバックエンドの開発サーバー(8000ポートなど)では表示されるのに、フロントエンドの開発サーバー(8080ポートなど)でページを開くと今まで表示されていたのに画面が真っ白になることがありました。このエラーの原因が判明するまでしばらく時間がかかりましたが、原因はビルドした際に出力するディレクトリとパスの関係でした。最終的にdist/staticという構造になるように設定することで表示が確認できました。

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: "/",
  outputDir: "../dist",
  assetsDir: "static",
  indexPath: "../templates/index.html",
  transpileDependencies: true,
  devServer: {
    host: "localhost",
    hot: "only",
    proxy: {
      "^/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
      },
    },
  },
})

以下のようにビルド後のディレクトリ構造がdist/staticになるように設定することで表示が確認できました。

  outputDir: "../dist",
  assetsDir: "static",

株式会社ファントムへのお問い合わせ

群馬県でPythonを使ったAIやソフトウェアを開発している株式会社ファントムが運営しています。




    Related Articles

    Django

    Dockerを使ってDjangoとPostgreSQL環境を構築(2)

    前回の内容が古くなってしまったので2021年版に更新します。 Dockerを使ってシンプルなDjangoとPostgreSQLの開発環境を構築する方法の2021年版です。以下の点が前回より変わった点です。・Volumeを […]

    Posted on by press
    Django

    Djangoでモジュールを作りviews.pyからimportして呼び出す

    Djangoでモジュールを作りviews.pyからimportして呼び出す方法です。 同じ処理を何度も書いたり、同じ処理を複数回呼び出したりするときは、その処理をモジュール化してviews.pyからimportして呼び出 […]

    Posted on by press

    最新情報をお届けします!

    メーリングリストに登録するとファントムの最新情報をお届けします

    お客様のメールアドレスを共有することはありません