spring boot + vue.js環境の構成

私はもともとフロントエンドの開発者でした.
正確に言えば、彼はAndroidアプリケーション開発者です.
そして機会があったらページ開発Spring bootにVueがこれはjsを一緒に使用するアーキテクチャからなるプロジェクトです.
フリーライターさんに助けられて開発されたのですが、当時は知らないことが多すぎて、仕事が進んでいた頃はもともとそうだったようです.
ある瞬間、私はいくつかの不快な場所に出会った.
しかし開発が進みすぎて取り返しがつかないため、不便なリスクを冒して継続することにした.
プロジェクト終了後、springbootにvueを入れるとrouterは使えませんか?一種の疑念があって、私は探して、答えも見つけました.
基本的なjava、node、vue cliなどはインストールされていると仮定し、続行します.

- https://start.spring.ioでspringbootプロジェクトを作成する

1人で開発する場合は、使用するIDEでプロジェクトを作成しても構いませんが、複数人で協力する場合は特定のIDEに依存しますか?Spring Initializerでプロジェクトを作成しないことをお勧めします.

-生成されたアイテムを使用するIDEに追加します。

-端末でvueプロジェクトを生成します。

vue-cliを使用してvuecreatefrontendコマンドでプロジェクトを作成し、springブートプロジェクトから分離します.

-vue構築時、スプリングガイドでデバッガを静的フォルダとして使用

package.jsonファイルでscriptsセクションを変更する
vueの変更時に自動的にコンパイルするには、変更が必要です.

"serve": "vue-cli-service serve"   =>   "serve": "vue-cli-service serve --port 3000" 
"build": "vue-cli-service build"   =>   "build": "vue-cli-service build --watch"

vue.config.jsファイルに次の内容を追加

module.exports = {
  // npm run build 타겟 디렉토리
  outputDir: '../backend/src/main/resources/static',

  // npm run serve 개발 진행시에 포트가 다르기때문에 프록시 설정
  devServer: {
    proxy: 'http://localhost:8080'
  }
};

その後、端末でfrontendフォルダを使用してnpm run buildを行い、springブートの下で静的フォルダでvueプロジェクトで構築されたファイルが呼び出されたことを検証できます.

Spring Bootサーバを実行し、ブラウザからhttp://localhost:8080に接続すると、vueによって作成されたページが開きます.

-routerを使用するために、Spring BootでErrorControllerを実装し、次のようにします。

@Controller
public class WebErrorController implements ErrorController {

    @GetMapping("/error")
    public String redirctRoot() {
        return "index.html";
    }

    public String getErrorPath() {
        return "/error";
    }
}

次に、スプリングブートを再起動し、ブラウザで検証します.
エラーコントローラが実装されていません

エラーコントローラの実装

個人的にはspringbootでVueを入れて完全に分離したほうがいいと思います
そんなに苦労して仕事をしなくてもいいでしょう...
ただ.CORSで苦しむけど...
サンプルアイテムを見に行きます