寫在最前面
實(shí)驗(yàn)室電腦，需要跑一個(gè)前后端分離的JAVA項(xiàng)目，于是開始重新配置
全部（數(shù)據(jù)庫+后端+前端）配置環(huán)境+修改代碼 耗時(shí)6h，包括遇到各種坑，但總體而言彎路走的不多
如果跟著這篇博客走，理論上會(huì)避開我遇到的那些坑hh
對(duì)于前端開發(fā)者來說，我們也沒有遺漏。文章將詳細(xì)介紹如何安裝Node.js并運(yùn)行前端項(xiàng)目，包括如何處理常見的錯(cuò)誤和配置問題。通過本文，你不僅能夠搭建起一個(gè)完整的Java項(xiàng)目開發(fā)環(huán)境，還能獲得處理潛在問題的實(shí)用技巧。
讓我們開始吧！
一、安裝node.js
Node.js下載地址：https://nodejs.org/en
下載20.10.0版本即可，下載后一路默認(rèn)安裝
安裝完成后在命令行輸入node -v，顯示版本則安裝成功
二、運(yùn)行前端項(xiàng)目
要運(yùn)行前端代碼并配置依賴，可以按照 README 文件中提供的說明操作。這些說明通常是為了設(shè)置項(xiàng)目、安裝依賴、運(yùn)行開發(fā)服務(wù)器以及構(gòu)建生產(chǎn)版本。
這里是一個(gè)基本的步驟指南：
-
確保您的計(jì)算機(jī)已安裝 Node.js 和 npm。
-
項(xiàng)目設(shè)置（Project setup）: 這是安裝項(xiàng)目所需依賴的第一步。您需要在命令行中運(yùn)行
npm install。這會(huì)根據(jù)package.json文件中列出的依賴項(xiàng)安裝所有必需的依賴。 -
編譯并熱重載以便開發(fā)（Compiles and hot-reloads for development）: 這一步是為了運(yùn)行開發(fā)服務(wù)器。通過命令
npm run serve，項(xiàng)目會(huì)啟動(dòng)一個(gè)本地服務(wù)器，并且通常會(huì)在代碼更改時(shí)自動(dòng)重新加載頁面。 -
編譯并壓縮以便生產(chǎn)（Compiles and minifies for production）: 當(dāng)您準(zhǔn)備將應(yīng)用部署到生產(chǎn)環(huán)境時(shí)，使用
npm run build命令。這將創(chuàng)建一個(gè)壓縮和優(yōu)化的版本，通常放在項(xiàng)目的dist/或build/目錄中。
在開始之前，請(qǐng)確保您位于包含前端代碼的文件夾中。這意味著您應(yīng)該在包含 package.json 文件的目錄中打開命令行工具。
以下是具體的步驟：
1. 運(yùn)行 npm install
運(yùn)行 npm install ，以安裝所有依賴。
2. 運(yùn)行 npm run serve
為了開發(fā)，運(yùn)行 npm run serve。這通常會(huì)在本地主機(jī)上的一個(gè)端口啟動(dòng)一個(gè)開發(fā)服務(wù)器（例如 http://localhost:8080）。
報(bào)錯(cuò)Error: error:0308010C:digital envelope routines::unsupported
您遇到的錯(cuò)誤信息是由于Node.js的一個(gè)版本兼容性問題。錯(cuò)誤Error: error:0308010C:digital envelope routines::unsupported通常與Node.js的加密庫和OpenSSL的版本有關(guān)。這個(gè)問題在Node.js 17及更高版本中比較常見，尤其是當(dāng)它們與舊的或不兼容的依賴項(xiàng)一起使用時(shí)。
方法1：設(shè)置 NODE_OPTIONS （沒用）
解決此問題的一個(gè)方法是通過設(shè)置環(huán)境變量來啟用這些舊的加密算法。您可以在運(yùn)行項(xiàng)目之前設(shè)置 NODE_OPTIONS 環(huán)境變量，以便允許使用這些算法。
在 Windows PowerShell 中，您可以通過以下命令來設(shè)置此環(huán)境變量：
$env:NODE_OPTIONS = "openssl-legacy-provider"
set NODE_OPTIONS=--openssl-legacy-provider
然后再次嘗試運(yùn)行您的項(xiàng)目：
npm run serve
這個(gè)方法的好處是它不需要更改代碼或項(xiàng)目配置。
方法2：更改Node.js版本
如果上述方法不起作用或您不想使用舊的加密算法，您可以考慮降級(jí)Node.js到一個(gè)更低的版本，比如16.x。較低版本的Node.js不會(huì)遇到這個(gè)特定的兼容性問題。使用NVM（Node版本管理器）可以輕松切換Node.js的版本。
方法3：更新依賴項(xiàng)（用的這個(gè)，成功解決）
有時(shí)，項(xiàng)目依賴項(xiàng)的舊版本可能不兼容最新版本的Node.js。檢查并更新您的項(xiàng)目依賴項(xiàng)可能有助于解決這個(gè)問題?？梢酝ㄟ^運(yùn)行npm update來更新依賴項(xiàng)。
方法4：檢查webpack配置
由于錯(cuò)誤中提到了webpack，可能需要檢查并確保您的webpack配置與您使用的Node.js版本兼容。確保您使用的webpack和相關(guān)加載器/插件都是最新的。
3. 運(yùn)行 npm run build
當(dāng)準(zhǔn)備好將項(xiàng)目部署到生產(chǎn)環(huán)境時(shí)，運(yùn)行 npm run build。
4. 前端訪問
#賬號(hào)
admin
#密碼
666666
成功運(yùn)行！文章來源：http://www.zghlxwxcb.cn/news/detail-759479.html
如果有任何問題，歡迎提問和交流！文章來源地址http://www.zghlxwxcb.cn/news/detail-759479.html
到了這里，關(guān)于【從0配置JAVA項(xiàng)目相關(guān)環(huán)境2】node.js + 前端 從配置到運(yùn)行的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
