springbootとVueの-CLI3パッケージ統合プロジェクト

まず、需要

前と使用後のパッケージの展開は、プロジェクトのspringboot作成のバックエンドを使用して作成し、フロントエンドのプロジェクトVUE-CLI3を使用して、分離手順の小端を書き込むために、展開時間一緒に、この論文は、詳細の一部が記載されています。

二、Vueのプロジェクト固有の設定

（1）時間に詰めVUEカジュアル、いくつかのバックエンド構成は、一貫して、通常の開発が必要

（2）生産環境設定変数：（ファイル：.env.production）、

：.env.productionは私自身の本番環境変数の設定である、あなた自身を作成する（特異的に参照することができVUE-CLI3環境設定、axios構成で、たとえば、あなたはこれを無視することができ、次の2つのステップを記入します）あなたは直接Axios.defaults.baseURL =「/ APP_NAME / V1」に構成することができます

NODE_ENV = ' 生産' 
VUE_APP_BASE_URL = / APP_NAME / V1 
VUE_APP_CONTEXT = /プレLCAS 
VUE_APP_ASSETS = スタティック

VUE_APP_BASE_URL

リクエストは、元々のエージェントとバックグラウンドで実行されたように、すべて、パスを開始し、プロジェクトで使用されるフロントエンド支持アセンブリaxios HTTPリクエスト、指定した設定ファイルのaxios Axios.defaults.baseURL = process.env.VUE_APP_BASE_URLのためのHTTPリクエストに割り当てられ、 `/ APP_NAME / v1`が追加されます、

たとえば、次のフロントエンドコードに使用するためのものである：/：axios.get（「/ reqUrl / ABC」）......背景に開始要求は、上記の構成によれば、要求パスパケット工学{HTTPなります/ XXX：XX / APP_NAME / V1 / reqUrl / ABC}この構成により、フロントエンドが要求と一致。

VUE_APP_CONTEXTとVUE_APP_ASSETS

次のようにコンフィギュレーション・ファイルvue.config.jsに、パケット情報の結果を設定するために使用された、構成は次のとおりです。

= module.exportsは{
   //はパス設定
  ：process.env.VUE_APP_CONTEXT、publicPath 
  assetsDir：process.env.VUE_APP_ASSETS、
......を
}

ロールpublicPathとassetsDirを参照することができ、公式ウェブサイトのいくつかを試してみました、assetsDirが設定されていない場合、index.htmlの問題コピーspringbootの下で静的リソースこのようなプロジェクトへのアクセスができなくなり、静的なディレクトリにファイルやCSSと他のディレクトリになります、方法、またはassetsDirが良く、静的に構成しました。次のように後にパッケージ化されたリソースのディレクトリ構造：

DIST
 - 静的 
---- CSS
 ---- フォント
 ---- IMG
 ---- JS
 - favicon.icoを
 - index.htmlを

コンプレックス、次springboot / srcに/メイン/リソースへの静的フォルダ、および静的ディレクトリにコピーfavicon.icoをするindex.htmlを。springbootがマルチモジュールプロジェクトの場合、リソースディレクトリのスタートアップファイルに静的ファイルをモジュール内に位置しています。次のようにspringbootディレクトリをコピーした後：

/ SRC
 - メイン
 - | - javaの
 - | - | - com.xx.xx.WebApplication
 - | - リソース
 - | - | - 静的 
- | - | - | - CSS
 - | - | - | - フォント
 - | - | - | - IMG
 - | - | - | - JS
 - | - | - | - favicon.icoを
 - | - | - | - index.htmlを
 - | - | --application.properties

三、springbootのプロジェクト構成

springbootに静的リソースをコピーした後、またはリソースへのアクセスに問題がないであろう、リソースがアクセスルールを設定する必要があります。

具体的なコードは次のとおりです。

輸入org.springframework.context.annotation.Configuration。
輸入org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry。
輸入org.springframework.web.servlet.config.annotation.WebMvcConfigurer。
@Configuration 
パブリック クラスのWebConfigはWebMvcConfigurer {実装
    @Override 
    公共 ボイドaddResourceHandlers（ResourceHandlerRegistryレジストリ）{ 
        registry.addResourceHandler（" /静的/ ** "（）.addResourceLocationsを" クラスパス：/静的/ " ）。
        WebMvcConfigurer.super.addResourceHandlers（レジストリ）; 
    } 
}

第四に、説明

前面に分離した後、この問題のバックエンド統合パッケージの一部の記事は、2つの問題が説明されています、

一つは、パッケージのミスならば、ロード時間中のcss / jsのindex.htmlを、その他のリソースを見つけることができませんので、この問題は、そのパッケージがパスであることを確認する必要がある静的リソースの統合がアクセスできるようにすることです。

別の要求は、分離経路を確保することである、ユーザーがアドレスバーがデータaxios要求パスを取得するために使用されているページのレンダリングのパスVUE-ルータで見て、オープンバックは、サービスルートは、パスを確認し、バックグラウンドaxiosを開いていますサービスは、パスと一致します。

資料に記載いくつかは、パス処理におけるバックエンドルータの必要性は、私のテストのコースは、単にパスとバックオフィスサービスはaxiosパス一致を確認して、例外はありません。

参考記事：

VUE-cli3.0構成された開発環境、テスト環境、オンライン環境（ https://blog.csdn.net/qq_37055675/article/details/85047451 ）

springboot + 1 VUEが組み合わさ正面から分離され、後端部（スキーム https://my.oschina.net/u/1760791/blog/1577662 ）

コンフィグレーションリファレンスVUE-CLI（ https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE ）