目錄

創(chuàng)新互聯(lián)是一家企業(yè)級(jí)云計(jì)算解決方案提供商,超15年IDC數(shù)據(jù)中心運(yùn)營(yíng)經(jīng)驗(yàn)。主營(yíng)GPU顯卡服務(wù)器，站群服務(wù)器，西信服務(wù)器托管，海外高防服務(wù)器，大帶寬服務(wù)器，動(dòng)態(tài)撥號(hào)VPS，海外云手機(jī)，海外云服務(wù)器，海外服務(wù)器租用托管等。

前言

前期準(zhǔn)備

創(chuàng)建項(xiàng)目

1.“小”插曲

1.巨大巨大超級(jí)超級(jí)低級(jí)的犯錯(cuò)

2.一波三折

3.正視自己

2.正式開(kāi)工

3.與報(bào)錯(cuò)的決戰(zhàn)

總結(jié)

---

前言

最近開(kāi)始系統(tǒng)學(xué)習(xí)maven了，所以想把之前在服務(wù)器上運(yùn)行的vaadin項(xiàng)目導(dǎo)入本地運(yùn)行。服務(wù)器上用的是idea，環(huán)境都是大佬配置好的直接run就可，但本地嘛，除了vscode只配置好了java外一無(wú)所有。。。

前期準(zhǔn)備

首先鄭重聲明，本人只是小白，這篇帖子也就權(quán)當(dāng)記錄進(jìn)步，有錯(cuò)請(qǐng)大佬指正，有想跟著嘗試的歡迎討論。

因?yàn)槭莔aven項(xiàng)目，所以需要maven。最好！不要用！最新版！（這點(diǎn)在maven沒(méi)體現(xiàn)出來(lái)）

安裝好后，配置環(huán)境變量。我把它和java放一起了，好找~

path方面，圖省事放頂層就好。

順便提一句，jdk最多最多17不得了了。因?yàn)樾掳鎗dk它maven不咋支持，而且vscode也沒(méi)idea系統(tǒng)，就莫名其妙會(huì)一堆報(bào)錯(cuò)。

本地倉(cāng)庫(kù)我還是放c盤(pán)，下載找的阿里云鏡像，在maven/conf/settings.xml里設(shè)置。

這兩個(gè)設(shè)置起來(lái)比較簡(jiǎn)單，xml里跟著相應(yīng)注釋放進(jìn)去就好。注意標(biāo)簽內(nèi)容放標(biāo)簽里頭。

C:\Users\${user_name}\.m2

nexus-aliyuncentralNexus aliyunhttp://maven.aliyun.com/nexus/content/groups/public

然后在vscode里把settings.xml路徑配置下，這里不想放圖了。。。

創(chuàng)建項(xiàng)目 1.“小”插曲 1.巨大巨大超級(jí)超級(jí)低級(jí)的犯錯(cuò)

一開(kāi)始我創(chuàng)建的是Spring Boot項(xiàng)目，再往里頭加vaadin依賴(lài)。。。屬于是忘記主次了。直到發(fā)現(xiàn)添加vaadin依賴(lài)比我想象的復(fù)雜得多才停手。（又是dependencyManagement又是plugin，我只學(xué)了dependency啊啊?。?/p>

又往里添加了spring web的依賴(lài)，這個(gè)導(dǎo)致大方向錯(cuò)了耽擱好久。

2.一波三折

創(chuàng)建好vaadin項(xiàng)目后，添加作業(yè)里的java代碼。依賴(lài)的話(huà)直接把舊項(xiàng)目的spring web全扒過(guò)來(lái)，屬實(shí)是高看自己了。但真的運(yùn)行起來(lái)了！不過(guò)打開(kāi)http://localhost:8080，是空白標(biāo)簽，寫(xiě)了WhiteLabel什么什么，反正是404。（圖是網(wǎng)上的，因?yàn)榕f項(xiàng)目現(xiàn)在會(huì)報(bào)錯(cuò)生成不出這個(gè)頁(yè)面了。真實(shí)時(shí)間是刺客伍六七第四季開(kāi)播那天）調(diào)了一個(gè)小時(shí)后放棄了。期間嘗試了下載server擴(kuò)展，mvn install安裝，把運(yùn)行程序放到j(luò)ava目錄底下等，作用不太大。

3.正視自己

問(wèn)了學(xué)長(zhǎng)，他說(shuō)可能是依賴(lài)的問(wèn)題。我就把作業(yè)里的依賴(lài)注入這個(gè)項(xiàng)目，一個(gè)個(gè)寫(xiě)入，看著大佬的架構(gòu)與選擇，相同依賴(lài)微小的參數(shù)區(qū)別，的過(guò)程令我大受震撼。其中一個(gè)依賴(lài)連阿里云鏡像，甚至maven官網(wǎng)都沒(méi)有，佩服！

org.vaadin.artura-vaadin-helper1.7.1

可都做到了這一步，花了那么長(zhǎng)時(shí)間，這點(diǎn)小挫折能難倒我嗎！？搜依賴(lài)名發(fā)現(xiàn)在git上開(kāi)源了，下載后用vscode打開(kāi)，mvn install安裝成jar。極不情愿地使用了SNAPSHOT版本（就是懶得找了），有條件的話(huà)一定要用穩(wěn)定版！

結(jié)果又報(bào)錯(cuò)了。原因是這位大佬在這個(gè)項(xiàng)目里使用了自己的另一個(gè)項(xiàng)目。那個(gè)項(xiàng)目呢，巧了，在maven官網(wǎng)也沒(méi)有。

org.vaadin.arturspring-data-provider2.1.0

再搜他的項(xiàng)目庫(kù)，都找到了。好在沒(méi)再出問(wèn)題，順利安裝！

關(guān)于mvn install啊，不僅能安裝到項(xiàng)目根目錄的target文件夾里，還會(huì)自動(dòng)復(fù)制到本地倉(cāng)庫(kù)。貼心的同時(shí)讓我眉頭一皺：我之前把自己項(xiàng)目裝著玩，結(jié)果倉(cāng)庫(kù)里用了一百多兆。。原來(lái)它還會(huì)把該項(xiàng)目所需的所有依賴(lài)一并壓縮進(jìn)jar里。過(guò)程大致是這樣的：查找本地是否有該依賴(lài)，沒(méi)有的話(huà)下載，再壓縮進(jìn)jar。

不過(guò)吧，可能是由于之前用spring web運(yùn)行增加了許多無(wú)用文件，依賴(lài)重新配置好后一直報(bào)異常。對(duì)小白來(lái)說(shuō)，一個(gè)項(xiàng)目如果更換許多依賴(lài)，就像抽去原本的血再注入不同血型的血，基本上是廢了。

2.正式開(kāi)工

無(wú)奈之下打開(kāi)原本的作業(yè)項(xiàng)目，由于依賴(lài)下載齊全，不出意外地正常運(yùn)行了（其實(shí)非常激動(dòng)）?？粗钆_(tái)和服務(wù)器端運(yùn)行時(shí)一模一樣的命令，看到

“--------------------Starting Frontend compilation.--------------------------”

應(yīng)該是開(kāi)啟前端編譯，生成node_modules文件夾，甚至打開(kāi)8080端口都在顯示前端代碼正在編譯，感覺(jué)成功有望。

不過(guò)很快迎來(lái)了報(bào)錯(cuò)。網(wǎng)頁(yè)寫(xiě)著：500?Internal Server Error，查找后確定原因：缺少一個(gè)module：@apideck/better-ajv-errors。來(lái)源于npm，可以直接下載。

雖然不是maven項(xiàng)目不能install，但文件格式和node_modules文件夾里的文件很像就直接移進(jìn)去用了。重新運(yùn)行發(fā)現(xiàn)，程序把這個(gè)better-ajv-errors文件夾刪掉了??！然后繼續(xù)報(bào)錯(cuò)。。。

3.與報(bào)錯(cuò)的決戰(zhàn)

咱程序員啊，有時(shí)候的靈光乍現(xiàn)真是妙不可言。我下意識(shí)將npm看成與maven相似的項(xiàng)目，一個(gè)主打前端，一個(gè)主打后端。想著是不是缺少npm相關(guān)的配置？于是從官網(wǎng)下載了《最新版》。一定！一定！千萬(wàn)！千萬(wàn)！下載穩(wěn)定版！

安裝后自動(dòng)配置環(huán)境變量，我手動(dòng)切換倉(cāng)庫(kù)和緩存路徑、國(guó)內(nèi)鏡像。

npm config set registry https://registry.npm.taobao.org  //切換淘寶鏡像
npm config set prefix "C:\Users\${user_name}\.npm"       //更改本地倉(cāng)庫(kù)路徑
npm config set cache "C:\Users\${user_name}\.npm-cache"  //更改緩存路徑

//相應(yīng)的查看方法們
npm config get registry
npm config get prefix
npm config get cache

再運(yùn)行，果不其然又報(bào)錯(cuò)啦：

node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen)；

一查才知道，得降版本，最好降到17以下：https://nodejs.org/download/release/v16.19.0/

下載這個(gè)，保證能用！

最終，雖然前端編譯后仍然沒(méi)有@apideck/better-ajv-errors，但依舊能夠運(yùn)行。程序員艱難的戰(zhàn)勝了報(bào)錯(cuò)，鏖戰(zhàn)九個(gè)半小時(shí)后迎來(lái)勝利的曙光！

看見(jiàn)“----------------- Frontend compiled successfully. -----------------”激動(dòng)不已。

作業(yè)是一個(gè)登錄模擬，甚至?xí)?hào)。是去年暑假做的，不過(guò)實(shí)現(xiàn)了本地保存用戶(hù)信息，比課程要求高一點(diǎn)點(diǎn)啦，但還是較簡(jiǎn)單的項(xiàng)目。

總結(jié)?

這個(gè)文件我還是用網(wǎng)盤(pán)分享吧：https://pan.baidu.com/s/1gObQ6HrC6bPfuJhqHapehg 8xrw

作業(yè)剛完成那會(huì)，在本地配置maven環(huán)境變量也不會(huì)，運(yùn)行個(gè)mvn compile也報(bào)一堆錯(cuò)?，F(xiàn)在啊，能配置好環(huán)境變量，能注入各種大佬的依賴(lài)完善代碼，能真正意義上實(shí)現(xiàn)本地開(kāi)發(fā)maven項(xiàng)目，我想也是個(gè)階段性的進(jìn)步吧。

注：配置環(huán)境變量后，最好運(yùn)行-v或者-version之類(lèi)的cmd代碼確保安裝成功

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級(jí)服務(wù)器適合批量采購(gòu)，新人活動(dòng)首月15元起，快前往官網(wǎng)查看詳情吧

分享名稱(chēng)：VSCODE：從零點(diǎn)五開(kāi)始運(yùn)行一個(gè)小型vaadin項(xiàng)目-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://weahome.cn/article/dpippj.html