欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

tomcat部署前端vue項(xiàng)目步驟(項(xiàng)目上線具體操作)

 更新時(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)目上線具體操作)的相關(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)文章

最新評(píng)論