フロントエンドプロジェクトを実行する
前に書きます
研究室のコンピュータは、フロントエンドとバックエンドを分けて JAVA プロジェクトを実行する必要があるため、再構成を開始しました。
環境の構成と変更に 6 時間かかりました。すべてのコード (データベース + バックエンド + フロントエンド)。さまざまな落とし穴に遭遇することを含みますが、全体的には寄り道はあまりありません
このブログに従っていると、理論的には私が遭遇した落とし穴を回避できますふー
フロントエンド開発者のためにも、私たちは何も手を抜きませんでした。この記事では、一般的なエラーや構成の問題への対処方法を含め、Node.js をインストールしてフロントエンド プロジェクトを実行する方法を詳しく紹介します。この記事を通じて、完全な Java プロジェクト開発環境をセットアップできるだけでなく、潜在的な問題に対処するための実践的なヒントも得ることができます。
はじめましょう！
1.node.jsをインストールする
Node.js のダウンロード アドレス: https://nodejs.org/en
バージョン 20.10.0 をダウンロードするだけで、ダウンロード後にデフォルトでインストールされます
インストールが完了したら、コマンド ラインに「node -v」と入力します。バージョンが表示されれば、インストールは成功しています。
2. フロントエンドプロジェクトを実行する
フロントエンド コードを実行して依存関係を構成するには、README ファイルに記載されている手順に従ってください。これらの手順は通常、プロジェクトのセットアップ、依存関係のインストール、開発サーバーの実行、実稼働バージョンのビルドに関するものです。
基本的なステップバイステップのガイドは次のとおりです。
-
コンピューターに Node.js と npm がインストールされていることを確認してください。
-
プロジェクトのセットアップ: これは、プロジェクトに必要な依存関係をインストールする最初のステップです。コマンドラインから
npm installを実行する必要があります。これにより、package.jsonファイルにリストされている依存関係に基づいて、必要な依存関係がすべてインストールされます。 -
開発用のコンパイルとホットリロード (開発用のコンパイルとホットリロード) : この手順では、開発サーバーを実行します。コマンド
npm run serveを使用すると、プロジェクトはローカル サーバーを起動し、通常はコードが変更されると自動的にページをリロードします。 -
本番環境用にコンパイルして縮小する (本番環境用にコンパイルして縮小する): アプリケーションを本番環境にデプロイする準備ができたら、
npm run buildコマンドを使用します。環境。これにより、圧縮され最適化されたバージョンが作成され、通常はプロジェクトのdist/またはbuild/ディレクトリに配置されます。
始める前に、フロントエンド コードが含まれるフォルダーにいることを確認してください。これは、package.json ファイルを含むディレクトリでコマンド ライン ツールを開く必要があることを意味します。
具体的な手順は次のとおりです。
1.走るnpm install
実行npm installして、すべての依存関係をインストールします。
2.走るnpm run serve
開発の場合は、npm run serve を実行します。これにより通常、ローカルホスト上のポートで開発サーバーが起動されます (例: http://localhost:8080)。
エラーを報告するError: error:0308010C:digital envelope routines::unsupported
発生したエラー メッセージは、Node.js のバージョン互換性の問題が原因です。エラーError: error:0308010C:digital envelope routines::unsupportedは通常、Node.js 暗号化ライブラリと OpenSSL のバージョンに関連しています。この問題は、Node.js 17 以降、特に古い依存関係または互換性のない依存関係で使用されている場合によく発生します。
方法 1: セットアップ NODE_OPTIONS (役に立たない)
この問題を解決する 1 つの方法は、環境変数を設定してこれらの古い暗号化アルゴリズムを有効にすることです。プロジェクトを実行する前に NODE_OPTIONS 環境変数を設定することで、これらのアルゴリズムの使用を許可できます。
Windows PowerShell では、次のコマンドを使用してこの環境変数を設定できます。
$env:NODE_OPTIONS = "openssl-legacy-provider"
set NODE_OPTIONS=--openssl-legacy-provider
次に、プロジェクトを再度実行してみます。
npm run serve
このアプローチの利点は、コードやプロジェクト構成の変更が必要ないことです。
方法 2: Node.js のバージョンを変更する
上記の方法が機能しない場合、または古い暗号化アルゴリズムを使用したくない場合は、Node.js を 16.x などの古いバージョンにダウングレードすることを検討してください。 Node.js の以前のバージョンでは、この特定の互換性の問題は発生しません。 NVM (Node Version Manager) を使用すると、Node.js のバージョンを簡単に切り替えることができます。
方法 3: 依存関係を更新する (これを使用し、正常に解決されました)
古いバージョンのプロジェクト依存関係は、Node.js の最新バージョンと互換性がない場合があります。プロジェクトの依存関係を確認して更新すると、この問題の解決に役立つ場合があります。依存関係は npm update を実行することで更新できます。
方法 4: Webpack 構成を確認する
エラーで述べたようにwebpack、Webpack 設定が使用している Node.js バージョンと互換性があることを確認してください。使用する Webpack および関連するローダー/プラグインが最新であることを確認してください。
3. 走るnpm run build
プロジェクトを運用環境にデプロイする準備ができたら、npm run build を実行します。
4. フロントエンドアクセス
#账号
admin
#密码
666666
無事に実行されました！
ご不明な点がございましたら、お問い合わせください。