vueプロジェクトがapacheサーバに配備されたページが空白の問題

3089 ワード

vueプロジェクトのサーバへの配置ページの空白の問題
vueに触れるのもしばらくの間、ちょうど会社に携帯電話端末のプロジェクトが多くのデータ処理にかかわる問題があり、考えてみるとvueで開発しようとしたが、前期も順調で、兄弟コンポーネント間の通信時だけbusを使っていた.vue中継時に最初のクリックで送信されなかったイベントが発生し、要素をクリックして送信された可能性があることを考慮し、確認ボタンをクリックしてルーティングジャンプを行う必要がある問題が発生し、この問題を解決することができず、vuexを使用してコンポーネント間のデータ通信を行い、問題を解決する.
プロジェクトがオンラインになるまで大きな問題はありません.サーバーに配備するのを待っています.vueオンラインを使用するのは初めてなので、後ろの穴についても何も知らないので、webpackを使ってdistディレクトリをパッケージしてバックエンドにサーバーに配備しました.そして、次のような問題が発生します.
  • ルーティングジャンプ時にmode: 'history'を使用して#番号を削除し、サーバcrmディレクトリの下に置く.www.asa.com/crmパスアクセス、リソースが取得できない問題、ページが空白、検索問題、ルーティングプロファイルにmode: 'history', base: '/crm/',を追加します.
  • そして、リソースをすべて取得してもロードされていますが、ページはまだ空白で、レンダリングされていません(この問題は問題1と同じようで、当時は記録されていなかったようですが、今は少しぼやけています)、バックエンド構成で問題を解決しました.
  • ページのレンダリングに成功する各ページのジャンプページは正常になったが、indexが1つしかないため、現在のページのリフレッシュで404の問題が発生した.htmlファイル、url中のルーティングジャンプはvue-routerで行い、実際のファイルにはloginがない.htmlなどのファイルは、サーバがこれらのページを探すと404エラーが発生しないため、バックエンドサーバ構成で404をすべてindexにジャンプする必要がある.htmlで問題を解決します.
  • 暇で問題がない3、バックエンドがどのように配置されているのか、自分で実現し、macの下にapacheを持っていることを例に配置します.
  • mac下apacheインストールパス/private/etc/apache 2/httpd.confでは、(apahceのプロファイル)rewrite_module機能をオンにし、LoadModule rewrite_module libexec/apache 2/mod_rewrite.so、前の#を削除
  • DocumentRoot "/users/Dev/sites"(  apache      )
      
          Options Indexes FollowSymLinks Multiviews
          MultiviewsMatch Any
          AllowOverride All
          Require all granted
        

    AllowOverride Allを設定するのはapacheをサポートするためです.hatccessファイル.*このプロジェクトのルートディレクトリに追加します.hatccessファイル(index.html平レベル)、内容とhttps://router.vuejs.org/zh-cn/essentials/history-mode.html'>HTML 5 Historyモード(vue-routerドキュメントの例)は似ています.
      
      RewriteEngine On
      RewriteBase /crm/
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /crm/index.html [L]
    

    ,修正が必要な2箇所,RewriteBase/crm/;RewriteRule ./crm/index.html[L]プロジェクトが存在するファイルのファイル名を追加するには、