tomcat部署前端vue項(xiàng)目步驟(項(xiàng)目上線具體操作)
更新時(shí)間：2024年07月12日 09:45:55 作者：北秋zone
在實(shí)際開發(fā)中,我們經(jīng)常會(huì)遇到將Vue項(xiàng)目部署到Tomcat服務(wù)器上的需求,下面這篇文章主要給大家介紹了關(guān)于tomcat部署前端vue項(xiàng)目(項(xiàng)目上線具體操作)的相關(guān)資料,需要的朋友可以參考下
一、Linux系統(tǒng)下安裝部署tomcat
在linux上安裝tomcat可以直接在linux服務(wù)器上通過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訪問
附：Vue項(xiàng)目部署到tomcat后顯示空白頁(yè)：
1.修改config/index.js文件
更改build下的assetsPublicPath: '/'為 ‘./’，注意是build下，不是dev下
module.exports = {
dev: {
...
},
build: {
...
// 修改assetsPublicPath: '/',
assetsPublicPath: './',
...
}
}2.router/index.js
在路由表里設(shè)置訪問項(xiàng)目的根路徑，設(shè)置base屬性：
export default new Router({
routes: constantRouterMap,
// mode: 'history', //后端支持可開
base:'/myvue/', //打包項(xiàng)目的根目錄
})3.打包部署
dist文件夾里面的文件復(fù)制到tomcat/webapps/myvue，啟動(dòng)服務(wù)，問題解決。
總結(jié)
到此這篇關(guān)于tomcat部署前端vue項(xiàng)目的文章就介紹到這了,更多相關(guān)tomcat部署前端vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用vue實(shí)現(xiàn)各類彈出框組件,文中給大家提到了vue中常用的dialog組件的封裝，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
這篇文章主要介紹了詳解Vue中l(wèi)ocalstorage和sessionstorage的使用方法和經(jīng)驗(yàn)心得，有需要的朋友跟著小編參考學(xué)習(xí)下吧。2017-12-12
這篇文章主要介紹了vue中v-show和v-if的異同 ，通過代碼詳解v-show用法，本文給大家介紹的非常詳細(xì)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
前端Vue3項(xiàng)目打包成Docker鏡像運(yùn)行的詳細(xì)步驟
將Vue3項(xiàng)目打包、編寫Dockerfile、構(gòu)建Docker鏡像和運(yùn)行容器是部署Vue3項(xiàng)目到Docker的主要步驟,這篇文章主要介紹了前端Vue3項(xiàng)目打包成Docker鏡像運(yùn)行的詳細(xì)步驟,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue模板語(yǔ)法-插值，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-03-03
vue3中通過遍歷傳入組件名稱動(dòng)態(tài)創(chuàng)建多個(gè)component 組件
這篇文章主要介紹了vue3中通過遍歷傳入組件名稱動(dòng)態(tài)創(chuàng)建多個(gè)component 組件,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
關(guān)于axios配置多個(gè)請(qǐng)求地址(打包后可通過配置文件修改)
這篇文章主要介紹了關(guān)于axios配置多個(gè)請(qǐng)求地址(打包后可通過配置文件修改)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了nuxt.js 緩存實(shí)踐，nuxt 的緩存可以分為 組件級(jí)別緩存 , API級(jí)別緩存 以及 頁(yè)面級(jí)別緩存，本文就詳細(xì)的介紹了這三種緩存，感興趣的小伙伴們可以參考一下2018-06-06
Vue使用el-input自動(dòng)獲取焦點(diǎn)和二次獲取焦點(diǎn)問題及解決
這篇文章主要介紹了Vue使用el-input自動(dòng)獲取焦點(diǎn)和二次獲取焦點(diǎn)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了詳解Vue自定義過濾器的實(shí)現(xiàn),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧。2017-01-01