1. 將項(xiàng)目打包

Vue中自帶webpack，可以通過(guò)一行命令將項(xiàng)目打包

# 執(zhí)行該命令打包
npm run build

2. 上傳相應(yīng)文件到服務(wù)器上

打包完成后，項(xiàng)目中會(huì)多出一個(gè)dist文件夾， 這個(gè)文件夾中就包含html、css、js等文件

直接將dist文件夾上傳到Tomcat的ROOT目錄下，默認(rèn)情況下，訪(fǎng)問(wèn)服務(wù)器網(wǎng)址會(huì)自動(dòng)定位到ROOT目錄下的index.html文件，如果是想要訪(fǎng)問(wèn)文件夾，原則上也放到這個(gè)目錄就可以了，
當(dāng)然，如果是war包則一定要放到webapps目錄下，tomcat會(huì)自動(dòng)解壓作為一個(gè)單獨(dú)的項(xiàng)目

原則上我們就可以通過(guò) http://ip地址/dist/index.html 來(lái)直接訪(fǎng)問(wèn)了，但是會(huì)有問(wèn)題~~

3. 匹配路由

考慮與Vue項(xiàng)目中設(shè)置的路由前綴匹配，將dist文件夾改個(gè)名字myspace，這樣我們?cè)谠L(fǎng)問(wèn) http://ip地址/myspace/ 的時(shí)候Vue中就會(huì)匹配myspace前綴，會(huì)直接定位到項(xiàng)目首頁(yè)，當(dāng)然不配置也沒(méi)關(guān)系，我們?cè)谠L(fǎng)問(wèn)資源的時(shí)候會(huì)直接跟在ip地址后面，感覺(jué)不太美觀

4. 頁(yè)面顯示錯(cuò)誤

訪(fǎng)問(wèn) http://ip地址/myspace/

控制臺(tái)報(bào)錯(cuò)：

可以看到是資源訪(fǎng)問(wèn)錯(cuò)誤，原因是Vue項(xiàng)目中訪(fǎng)問(wèn)資源是絕對(duì)路徑 /

解決方法就是將項(xiàng)目中的js目錄和css目錄移動(dòng)到ROOT目錄下，和myspace目錄同級(jí)

5. 再次訪(fǎng)問(wèn)

再訪(fǎng)問(wèn) http://ip地址/myspace/，記得刷新一下緩存 快捷鍵 Ctrl + Shift + R

發(fā)現(xiàn)可以直接定位到項(xiàng)目首頁(yè)，這樣就把Vue路由前綴和ROOT目錄下的項(xiàng)目文件夾名myspace統(tǒng)一起來(lái)了

你只管出發(fā)，旅途自有風(fēng)景~~

到此這篇關(guān)于將Vue項(xiàng)目部署到Tomcat服務(wù)器上（簡(jiǎn)單、粗暴）的文章就介紹到這了,更多相關(guān)Vue部署Tomcat服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論