vue プロジェクトがパッケージ化されてサーバーに送信されます

今回はvueプロジェクトをパッケージ化してサーバーに送信する際の注意事項を紹介します。以下は実際のケースですので見てみましょう。

vue プロジェクトが完了したら、プロジェクトをオンラインでパッケージ化してサーバーに配置する方法に直面します。私は vue-cli (シンプル) スキャフォールディングを使用しているので、プロジェクトをパッケージ化して Tomcat に配置する方法について説明します。

vue-cli (単純なスキャフォールディングではない) の場合は、この記事が役立つかもしれません。アドレスリンク: vue-cli をパッケージ化して起動する方法

まず、プロセス中に発生した問題について説明します:

1. パッケージ化後、ブラウザでアクセスすると、dist フォルダーとindex.html が tomcat に配置されます。ページにスペースが表示され、f12 を押すと 404 が表示されます。
2. パッケージ化された静的リソースはすべて絶対パスであり、404 であるプロジェクトにインポートすることはできません。

1. プロジェクトディレクトリ構造

これはパッケージ化されているため、distフォルダーがあります。パッケージ化方法: npm run build。

2. webpack.config.js

ここで最も重要なのは、静的リソース 404 を導入できない問題を解決できるため、これはほんの一部です。 。

3. npm でパッケージ化されたファイルを実行します。

npm run build はパッケージ化後に dist フォルダーを生成します。その中のディレクトリは次のとおりです。

webpack パッケージ化ツールの原理がよくわからないので、どのようなフォルダーを生成すればよいのかわかりません。ここはこんな感じです。私たちのindex.htmlはこのjsファイルをインポートするため、主にメインのbuild.jsです。 ElementUI によって生成されたいくつかの picture ファイルと ttf および woff もあります。

4.サーバーに入れる方法。

次のステップは、生成された dist フォルダーとindex.html ファイルをサーバーに配置することです。必要なのはこの 2 つだけです。まず、両方のファイルを同じフォルダーに置き、gas (何でもよい) という名前を付けました。

次に、そのフォルダーを Tomcat に置き、そのフォルダーを Tomcat の webapps フォルダー ディレクトリに置きます。

ok デプロイが完了したら、Tomcat を起動すると、空白のページが表示されることがわかります。一部の静的リソースは 404 です。

5. 空白ページと静的リソースが導入されない問題を解決します。

1. まず、空白ページの問題は、パッケージ化した後、相対パスである必要があることがわかります。必要なのは、index.html ページを変更することです。

変更せずに前のバージョンを見てください:

/dist/build.js が絶対パスを参照していることを確認してください。これにより、tomcat がindex.html ページにアクセスするときに 404 が報告されます。パスを相対パス ./dist/build/ に変更する必要があります。もう 1 つ重要な点があります。さて、メインページが表示されるはずです。

しかし、私の静的リソースと画像 (img 形式でのインポートを除く)、たとえば CSS で background:url() を使用している画像は 404 で表示されていることがわかります。

2. 静的リソースの障害の問題を解決する

これには、webpack.config.js の publicPath を変更する必要があります。デフォルトの vue-cli スキャフォールディング環境が構築された後、publicPath は次のようになります。

パスが /dist/ であることがわかります。したがって、この時点でページを開くと、静的リソースのパスは次のようになり、エラー 404 が報告されます: http://10.0.0.181:8088/dist/bg.png?fe9b889cea51978538ce352593be0573<code>http://10.0.0.181:8088/dist/bg.png?fe9b889cea51978538ce352593be0573

显然可以看出和我们想要的路径不一致，上面我贴出来的在 tomcat 的文件目录中我将 dist 和 index.html 都放进了一个 gas 的文件夹中。所以正确的路径应该是这样的：
http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573

明らかにそれは可能です。上記で投稿したtomcatのファイルディレクトリでは、distとindex.htmlの両方をgasフォルダーに配置しています。したがって、正しいパスは次のようになります:

http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573

違いを見てください。

解決策:

そのため、webpack.config.js publicPath: /gas/dist/ の出力パスを変更する必要があります。静的リソースをプロジェクトに導入できるように、最も外側のフォルダー パスを追加します。

さて、これまでのところ、2 つの最も重要な問題は解決されました。1 つは空の Index.html ページであり、もう 1 つは間違った静的リソース パスです。

6.index.html ページ内のリンクとスクリプトによって参照されている無効なリソース:

その理由は、パス アドレスが間違っているためです:

妥協的な解決策は、参照するリソースをパッケージ化された dist フォルダーに手動で配置することです。を指定し、dist の相対パスに従って、index.html で参照します。

コード内の icon.ico は、アイコン icon を dist フォルダーに手動で配置し、対応する参照パスに従って参照したものです。他の css および js 参照も同じです。

7. 解決すべき問題:

1. 私のプロジェクトでは ElementUI フレームワークを使用しましたが、それをパッケージ化してサーバーに置いた後、ボタンのスタイルとすべての

パディングが変更されていることがわかりました。

が失敗したため、スタイルを手動で追加することしかできません。

2. 私のindex.htmlにリンクCSSファイルを導入するときは、まだ相対パスを導入する方法がないので、他のものは通常、npm Install asを使用して挿入されます。依存関係。 8. オンラインで を検索して、関連する問題と解決策を見つけます。

1. 助けて！ Vue プロジェクトは Webpack でパッケージ化されてサーバー上に配置されていますが、アクセスは白紙のページですか?長い間取り組んできましたが、その理由はわかりません。 2. vue プロジェクトでは、npm run build によって生成されたindex.html ファイルがルート ディレクトリで開かれた場合にのみ有効になります。解決しますか？

3. Vue アプリケーションをサーバーにデプロイする正しい方法

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ウェブストームに *.vue ファイルを追加させる方法

vue2.0 入力ボックスのリアルタイム取得と更新を実装する手順の詳細な説明

以上がvue プロジェクトがパッケージ化されてサーバーに送信されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。