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