開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにした npm run dev コマンドを通じて実行されます。 しかし、サーバーではそうではありません。プロジェクト全体を npm run build コマンドを使用してパッケージ化する必要があります。パッケージ化後、プロジェクト ディレクトリに次の内容の dist フォルダーが生成されます。 次に、これらのファイルをサーバー上のフォルダにドロップします。私のフォルダ名はibmsです。 発生した問題:1. http://www.xxx.com/ibms/ に直接アクセスすると、Web ページが何も表示されていない白い画面になっていることがわかります。これは非常に奇妙です。実際には、リソースの読み込みパスに問題があるためです。 解決: config の index.js の build で webpack 構成を変更します。 アセットパブリックパス: '/ibms/' ルーターの index.js 構成に以下を追加します。 デフォルトの新しいルーターをエクスポートします({ モード: '履歴'、 スクロール動作: () => ({ y: 0 }), base: '/ibms/', // この行を追加 route: constantRouterMap }) 次に、npm run build で再パッケージ化し、サーバーの ibms フォルダーにドロップします。その後、ページに正常にアクセスできるようになります。 2. 現在のページを更新するか、URL バーを使用してサブページにアクセスすると、Web ページが 404 であることがわかります。これは、Vue ルーティングのモードが履歴モードであるためです。 解決: すべてのリクエストを http://www.xxx.com/ibms/index.html に転送してください。 ここでは、Web サーバーとして Apache を使用しています。ibms ディレクトリ (index.html と同じレベル) に新しい .htaccess ファイルを作成し、コードを編集します。 <IfModule mod_rewrite.c> RewriteEngine オン 書き換えベース /ibms/ 書き換えルール ^index\.html$ - [L] 書き換え条件 %{REQUEST_FILENAME} !-f 書き換え条件 %{REQUEST_FILENAME} !-d 書き換えルール . /ibms/index.html [L] </モジュール> この構成の目的は、サーバー上に存在しないすべてのリクエストを index.html に転送することです。 (追記: Apache サーバーを再起動することを忘れないでください) Vue プロジェクトをパッケージ化して Apache サーバーにデプロイする手順に関するこの記事はこれで終わりです。Vue プロジェクトのパッケージ化と Apache へのデプロイに関するより詳しい情報については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
目次uni-app のスタイル要約するuni-app のスタイルsassプラグインは公式ウェブサイト...
目次1. ミックスイン.scss 2. 単一ファイルの使用3. グローバルマウント3.1 依存関係の...
この記事では、Element-uiを使用してvue.jsでナビゲーションメニューを実装するための具体...
まず、このブログのケースデモンストレーション テーブルを作成します。 create table a(...
1. ソフトウェアのインストールパスを確認します。 Linuxソフトウェアをインストールできる場所は...
これは私の最初のブログ投稿です。時間の制約があるため、どのようにフォーマットすればよいかわかりません...
序文最近、仕事で問題が発生しました。データベースを作成した後、データベースに接続するときにエラーが発...
参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な...
1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...
mysql-5.7.19-winx64インストールフリー版の設定方法、参考までに具体的な内容は以下の...
方法 1: INSERT INTO t1(field1,field2) VALUE(v001,v00...
<br />2 年前に PPK が投稿した素晴らしいブログ記事では、contains()...
この記事では、MySQLのインストールと設定のリモートログインチュートリアルを参考までに紹介します。...
HTML5 では、ヘッダー、フッター、ナビゲーションなどのセマンティック タグが追加されているため...
では、早速スクリーンショットを実行してみましょう。黒い駒はプレイヤーの位置、赤い駒はコンピュータの位...