阿丹有話說：
? ? ? ? 之前在寫spring-boot項目的時候是直接寫的jsp頁面直接打成war包來運(yùn)行。使用到了tomcat,而且簡單方便，但是美中不足就是動畫演示以及頁面沒有辦法做的非常美觀。自從開始寫前后端分離的項目（微服務(wù)等）之后，發(fā)現(xiàn)element-ui是真的好用?，F(xiàn)在想給vue的項目打包部署在自己的服務(wù)器上的時候發(fā)現(xiàn)了一些不一樣。經(jīng)過兩天的學(xué)習(xí)以及摸爬滾打 ，學(xué)到了一些心得。給大家總結(jié)出來一個文章。方便大家，也想讓大家少走一些彎路（和我一樣）。
? ? ? ? 我這邊給我的一個服務(wù)器重裝一下，以后專門用來前臺使用。
我發(fā)現(xiàn)在阿里云的服務(wù)器上可以直接選擇tomcat也自帶了nginx，那阿丹就不客氣啦！?
tomcat與nginx的簡介
tomcat
Tomcat是一個開源的Java應(yīng)用服務(wù)器，它是一個Servlet容器，可以用來處理Java Servlet和JavaServer Pages（JSP）的請求。它的定位相當(dāng)于Apache服務(wù)器的擴(kuò)展，可以用來提供完整的JavaEE（Java Enterprise Edition）支持。Tomcat 的主要功能是連接HTTP協(xié)議，也可以充當(dāng)Web服務(wù)器。通俗來講就是Tomcat是一個Web應(yīng)用程序服務(wù)器，是將Java Servlet和JSP等動態(tài)網(wǎng)頁技術(shù)整合在一起形成的Java Web應(yīng)用服務(wù)器。它采用Java語言編寫，具有輕量級、性能高、易部署等特點(diǎn)，能夠運(yùn)行跨平臺，廣泛應(yīng)用于Web開發(fā)和云計算平臺中。
nginx
Nginx是一款高性能、可靠性強(qiáng)的Web服務(wù)器和反向代理服務(wù)器。它起源于俄羅斯，并廣泛應(yīng)用于許多高流量的網(wǎng)站，如GitHub、Netflix和WordPress。Nginx之所以受歡迎，是因?yàn)樗捎昧耸录?qū)動的異步架構(gòu)，通過多進(jìn)程和多線程進(jìn)行請求處理，使其能夠處理大量并發(fā)連接，同時還具有快速響應(yīng)、高可靠性、低內(nèi)存占用等優(yōu)點(diǎn)。除了作為Web服務(wù)器，Nginx還可以作為負(fù)載均衡器、反向代理、高速緩存、HTTP流媒體服務(wù)器等。相對于其他Web服務(wù)器，Nginx還有一個獨(dú)特的功能模塊化架構(gòu)，允許用戶通過添加模塊來擴(kuò)展其功能。
vue項目打包
阿丹貼士：
? ? ? ? 不同的vue框架的打包部署指令不一樣。之前在使用 init webpack的時候使用的到的打包部署指令在git拉取的花褲衩框架上就不好使了。所以一定在在打包之前先提前搞清楚自己的框架是那種。這里我給大家提供三種常用的框架來供大家判斷。
-
Vue-CLI：Vue-CLI是一個官方命令行工具，可以快速創(chuàng)建Vue項目，提供了多種打包方式的選項，如將項目打包成UMD、CommonJS或ESM模塊等。
-
Nuxt.js：Nuxt.js是一個基于Vue.js的通用應(yīng)用框架，它提供了諸如自動化代碼拆分、服務(wù)端渲染等優(yōu)化功能，可以支持打包成為靜態(tài)網(wǎng)頁、服務(wù)器端應(yīng)用和單頁面應(yīng)用等不同的應(yīng)用類型。
-
Quasar Framework：Quasar Framework是一個用于構(gòu)建響應(yīng)式移動端和Web應(yīng)用程序的綜合框架，它可以幫助您構(gòu)建不同類型的應(yīng)用程序，例如SPA、PWA和Electron應(yīng)用程序。Quasar還內(nèi)置了Webpack和相應(yīng)的打包方式，可以輕松構(gòu)建和部署應(yīng)用程序。
以上是部分常見的Vue項目打包方式及其對應(yīng)的框架，不同的打包方式適用于不同的應(yīng)用場景和需求，選擇適合自己項目的打包方式可以有效提高項目的性能和穩(wěn)定性。
????????Vue-CLI的打包方式： 使用以下命令將Vue項目打包成UMD模式： npm run build -- --formats umd
使用以下命令將Vue項目打包成CommonJS模式： npm run build -- --formats cjs
使用以下命令將Vue項目打包成ESM模式： npm run build -- --formats esm
????????Nuxt.js的打包方式： 使用以下命令將Nuxt.js項目打包成靜態(tài)網(wǎng)頁： npm run generate
使用以下命令將Nuxt.js項目打包為服務(wù)器端部署應(yīng)用程序： npm run build
????????Quasar Framework的打包方式： 使用以下命令將Quasar Framework項目打包成SPA應(yīng)用程序： quasar build
使用以下命令將Quasar Framework項目打包成PWA應(yīng)用程序： quasar build -m pwa
使用以下命令將Quasar Framework項目打包成Electron應(yīng)用程序： quasar build -m electron
tomcat進(jìn)行vue項目的部署
因?yàn)槲业捻椖渴褂玫氖巧厦娴牡谝环N所以使用 npm run build
?打包好之后將會出現(xiàn)了dist的文件夾我們需要做的就是將這個文件夾下面的東西全部放在tomcat的網(wǎng)站根目錄下面。
阿丹解讀：
? ? ? ? 在使用vue打包使用tomcat進(jìn)行部署的時候要注意在vue項目的config文件夾下的index.js下面要寫上代理，一定要解決跨域問題，以及前后臺分離。所以要將前臺傳遞的信息傳遞到后臺去。我給大家提供一段代理的示例代碼。
'/api': {
target: 'http://xxx.xxx.xxx.xxx:10001',//需要代理的地址
changeOrigin: true,
pathRewrite: {
'^/api':"/"
}這段代碼解決了跨域的問題，同時將前臺的請求在使用axios進(jìn)行請求的時候來匹配到對應(yīng)的服務(wù)器中。并且隱藏了我們后臺的服務(wù)器端口。讓我們的后臺安全有了保證。
? ? ? ? 這是使用tomcat來打包部署，如果使用的是nignx那么就要額外去的考慮了。
我們現(xiàn)在獲取到了我們需要的dist包。
?將打包好的vue項目部署到tomcat中
首先找到tomcat的應(yīng)用根目錄
因?yàn)槲沂褂玫氖前⒗镌频姆?wù)器按照我的這個指示可以直接找到官網(wǎng)提供的。
如果是我們自己安裝的話，阿丹會在后期附上一個自己安裝tomcat以及nignx的文檔連接。如果你需要請在下面評論。阿丹會盡快更新文檔出來。
?
可以看到這個文件結(jié)構(gòu)。
?
?進(jìn)入到對應(yīng)的文件夾下。
上傳文件到指定文件夾?？梢栽趙ebapps文件夾下面新建一個文件夾取名為你項目的名稱。
上傳vue文件以及取名
我通過使用遠(yuǎn)程連接工具將文件傳入ad文件夾下了。重新啟動tomcat測試一下。
?
訪問端口號+8080
發(fā)現(xiàn)tomcat頁面正常
但是訪問頁面發(fā)現(xiàn)報錯404
?同時頁面為空白。
嘗試將config下的index.js中的'/'改成了‘./’
assetsPublicPath: './',
?重新打包上傳！
?還是提示404是因?yàn)闆]有找到正確的靜態(tài)資源。
?找到了！之前是在dev下面寫的這些配置，應(yīng)該是在bulid下面寫這些配置！
?發(fā)現(xiàn)資源能夠正常訪問到了??！
但是發(fā)現(xiàn)了一個新的問題！就是訪問不到后臺的端口號以及后臺，對于后臺報404，是因?yàn)橹皩懙腶pi是測試環(huán)境/開發(fā)環(huán)境，并不是部署的環(huán)境的api。
我明天再更新一下這個文章，一共有兩個方法。
這是第一個方法！
我今天先將vue中的axios中的路徑全部更換為后臺的真實(shí)的路徑不使用api文章來源：http://www.zghlxwxcb.cn/news/detail-770883.html
下期更新第二個方法！文章來源地址http://www.zghlxwxcb.cn/news/detail-770883.html
到了這里，關(guān)于關(guān)于部署vue項目在Linux上的兩種方式tomcat以及nignx（1）使用tomcat進(jìn)行部署的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
