阿里云服務(wù)器搭建web項(xiàng)目小結(jié),阿里云搭建各種服務(wù)器-ESG跨境

阿里云服務(wù)器搭建web項(xiàng)目小結(jié),阿里云搭建各種服務(wù)器

阿里云服務(wù)器搭建web項(xiàng)目小結(jié)

前言

最近恰好有時(shí)間，自己搞了個(gè)云服務(wù)器試著搭建了個(gè)網(wǎng)站，遇到了一些問題，通過踩坑也漲了一些經(jīng)驗(yàn)，遂記錄一二，與后來者分享。

正文

1、博主用的阿里云服務(wù)器，為什么用它呢一個(gè)是恰逢雙十一，有優(yōu)惠；另一個(gè)原因，它畢竟是國內(nèi)市場(chǎng)占有率最高的廠家，各種學(xué)習(xí)資料應(yīng)該也是最多的。各位園友自建網(wǎng)站時(shí)按自身情況酌情選擇即可。

如果用阿里云服務(wù)器的話，按照官網(wǎng)上的教程來操作是最好的選擇，現(xiàn)在各類形形色色的博客里的安裝操作教程均會(huì)有不同程度的不詳盡，指不定那里就會(huì)埋坑。阿里云服務(wù)器手動(dòng)搭建javaweb環(huán)境的官網(wǎng)教程的網(wǎng)址【https://help.aliyun.com/documentdetail/51376.html spm=5176.12901015.0.i12901015.af8f525cCPi8QI】，在此教程頁的左邊菜單欄，還有包括數(shù)據(jù)庫搭建、鏡像操作等各種教程，而且很詳細(xì)，直接照著做即可，快捷高效。

2、打tomcat用的war包

博主用的idea，直接打開maven的右側(cè)操作欄，找到根module，先clean再package

這時(shí)在你的項(xiàng)目目錄下就有最新的war包了

包名稱可以直接在所打包的項(xiàng)目的pom.xml中自定義，如下所示：

3、tomcat啟動(dòng)報(bào)錯(cuò)

org.apache.catalina.LifecycleException:Failed to start component[StandardEngine[Catalina].StandardHost[localhost].StandardContext[/points]]

錯(cuò)誤信息截圖如下：

這時(shí)由于tomcat的版本與jdk版本沖突導(dǎo)致的，一般來說jdk1.7對(duì)應(yīng)tomcat7，jdk1.8對(duì)應(yīng)tomcat8，我最開始是用的jdk1.8搭配tomcat7，所以出現(xiàn)了上述問題。將tomcat換成8后問題解決。

4、H5入門

最近也順便研究了一下h5開發(fā)，這樣一些簡(jiǎn)單的頁面自己就能搞定了。

首先說一下h5的開發(fā)環(huán)境搭建。我用的是Visual Studio Code（簡(jiǎn)稱VSC）+Node.js+Vue。為方便大家對(duì)照后端技術(shù)理解H5前端用的技術(shù)，可以先這樣理解：VSC是前端常用的開發(fā)工具，類比后端用的Idea和Eclipse，它們作用是一樣的；Node.js是vue的開發(fā)環(huán)境，類比我們后端的JDK；而vue可以類比成我們的Spring框架，簡(jiǎn)化開發(fā)，功能強(qiáng)大；npm是用于包管理的，類似我們的maven。這樣一類比，相信大家都有一個(gè)更直觀的感受了。下面大體說一下我的搭建過程。

1)、下載node.js https://nodejs.org/en/

具體操作參見博客【https://www.cnblogs.com/lunlunshiwo/p/7476031.html】

2)、正常的npm服務(wù)在國外，安裝較慢，此處我們使用國內(nèi)的，安裝指令

npm installg cnpmregistry=http://registry.npm.taobao.org

安裝完之后用cnpmv指令查看

3)、安裝vuecli一種全局腳手架，用于搭建所需的模板框架，但注意此處直接運(yùn)行上述指令可能會(huì)卡主，執(zhí)行下面的就好了：

npm config set registry https://registry.npm.taobao.orgglobal

然后npm installg vue/cli

注意安裝過程要運(yùn)行管理員權(quán)限的cmd指令操作頁面，如果還有報(bào)錯(cuò)，用指令npm installg npm latest將版本升到最新。

4)、初始化環(huán)境

npm installg vue/cliinit

vue init webpack myproject

一頓yes往下走就行了，初始化完項(xiàng)目之后的目錄是這樣的

5)、集成VScode

參見博文【https://blog.csdn.net/mao834099514/article/details/79138484】

6)、增加智能提示

點(diǎn)擊extension按鈕，如下圖，點(diǎn)擊后搜索intelliSense，選擇node.js的和css，就會(huì)有智能提示了

7)、增加標(biāo)簽自動(dòng)補(bǔ)全功能

同樣在extension處安裝三個(gè)插件即可：Auto Close Tag/Auto Rename Tag/Auto Complete Tag

8)、npm run dev

去訪問項(xiàng)目吧

好了，這次就到這里，如果有問題或者疑問，歡迎大家留言區(qū)交流，謝謝閱讀

特別聲明：以上文章內(nèi)容僅代表作者本人觀點(diǎn)，不代表ESG跨境電商觀點(diǎn)或立場(chǎng)。如有關(guān)于作品內(nèi)容、版權(quán)或其它問題請(qǐng)于作品發(fā)表后的30日內(nèi)與ESG跨境電商聯(lián)系。