tomcat部署前端vue項(xiàng)目步驟(項(xiàng)目上線(xiàn)具體操作)
更新時(shí)間：2024年07月12日 09:45:55 作者：北秋zone
在實(shí)際開(kāi)發(fā)中,我們經(jīng)常會(huì)遇到將Vue項(xiàng)目部署到Tomcat服務(wù)器上的需求,下面這篇文章主要給大家介紹了關(guān)于tomcat部署前端vue項(xiàng)目(項(xiàng)目上線(xiàn)具體操作)的相關(guān)資料,需要的朋友可以參考下
一、Linux系統(tǒng)下安裝部署tomcat
在linux上安裝tomcat可以直接在linux服務(wù)器上通過(guò)wget方式直接下載tomcat，也可以把本地的tomcat上傳到服務(wù)器。
具體操作步驟如下：
- 創(chuàng)建一個(gè)tomcat目錄，位置可以根據(jù)自己情況選擇
mkdir /usr/local/tomcat
- 將上傳的tomcat復(fù)制到上面目錄
cp apache-tomcat-7.0.77.tar.gz /usr/local/tomcat/
- 進(jìn)入tomcat目錄
cd /usr/local/tomcat/
- 解壓tomcat
tar -zxvf apache-tomcat-7.0.77.tar.gz
- 進(jìn)入tomcat的bin目錄
cd /usr/local/tomcat/apache-tomcat-7.0.77/bin/
- 啟動(dòng)tomcat
./startup.sh
- 關(guān)閉tomcat
./shutdown.sh
二、tomcat中部署vue項(xiàng)目
- 刪除tomcat目錄\webapps\ROOT下全部文件
- npn run build打包vue項(xiàng)目（根據(jù)不同項(xiàng)目打包方式不同）
- 將生成的dist文件夾復(fù)制到\webapps\ROOT目錄下
- 在ROOT目錄下新建WEB-INF文件夾并在WEB-INF文件夾下新建web.xml,并粘貼以下內(nèi)容
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/dist/index.html</location>
</error-page>
</web-app>
5.啟動(dòng)tomcat然后localhost:8080/dist訪問(wèn)
附：Vue項(xiàng)目部署到tomcat后顯示空白頁(yè)：
1.修改config/index.js文件
更改build下的assetsPublicPath: '/'為 ‘./’，注意是build下，不是dev下
module.exports = {
dev: {
...
},
build: {
...
// 修改assetsPublicPath: '/',
assetsPublicPath: './',
...
}
}2.router/index.js
在路由表里設(shè)置訪問(wèn)項(xiàng)目的根路徑，設(shè)置base屬性：
export default new Router({
routes: constantRouterMap,
// mode: 'history', //后端支持可開(kāi)
base:'/myvue/', //打包項(xiàng)目的根目錄
})3.打包部署
dist文件夾里面的文件復(fù)制到tomcat/webapps/myvue，啟動(dòng)服務(wù)，問(wèn)題解決。
總結(jié)
到此這篇關(guān)于tomcat部署前端vue項(xiàng)目的文章就介紹到這了,更多相關(guān)tomcat部署前端vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Mint UI實(shí)現(xiàn)A-Z字母排序的城市選擇列表
這篇文章主要為大家詳細(xì)介紹了Mint UI實(shí)現(xiàn)A-Z字母排序的城市選擇列表，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
vue學(xué)習(xí)筆記之Vue中css動(dòng)畫(huà)原理簡(jiǎn)單示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之Vue中css動(dòng)畫(huà)原理,結(jié)合簡(jiǎn)單實(shí)例形式分析了Vue中css樣式變換動(dòng)畫(huà)效果實(shí)現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
watchEffect，它立即執(zhí)行傳入的一個(gè)函數(shù)，同時(shí)響應(yīng)式追蹤其依賴(lài)，并在其依賴(lài)變更時(shí)重新運(yùn)行該函數(shù)，本文主要介紹了Vue3中watchEffect的具體用法，感興趣的可以了解一下2022-05-05
vue element 生成無(wú)線(xiàn)級(jí)左側(cè)菜單的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue element 生成無(wú)線(xiàn)級(jí)左側(cè)菜單的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue使用highcharts自定義圖例點(diǎn)擊事件
這篇文章主要為大家詳細(xì)介紹了vue使用highcharts自定義圖例點(diǎn)擊事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
本文介紹了如何在Vue3項(xiàng)目中整合Live2D技術(shù),從Live2D的基本介紹到在Vue3中的具體實(shí)現(xiàn)方法,Live2D技術(shù)允許開(kāi)發(fā)者將二維圖像轉(zhuǎn)化為可動(dòng)畫(huà)的三維模型,主要應(yīng)用于游戲、虛擬角色等領(lǐng)域,文章詳細(xì)說(shuō)明了在vue3項(xiàng)目中使用Live2D的步驟,感興趣的朋友一起看看吧2024-10-10
該文章主要介紹了如何在Vue3項(xiàng)目中使用ECharts圖表庫(kù),并列舉了折線(xiàn)圖的示例代碼和常用屬性,如X軸刻度設(shè)置、折線(xiàn)圖樣式和顏色配置、tooltip顯示、選中狀態(tài)設(shè)置、添加單位和名稱(chēng)、數(shù)據(jù)縮放等2025-10-10
淺談vue在html中出現(xiàn){{}}的原因及解決方式
這篇文章主要介紹了淺談vue在html中出現(xiàn){{}}的原因及解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了關(guān)于Vue 3.0引入百度地圖不兼容的解決辦法,本文通過(guò)實(shí)例代碼給大家分享解決方法，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了詳解vue-router 初始化時(shí)做了什么,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06