目錄
背景：
1、把項目中vite.config.js文件中的base修改為項目名稱
2、有些小伙伴的路由可能需要修改
3、執(zhí)行打包命令
?編輯
4、打完包項目目錄會出現(xiàn)dist目錄
5、復制dist目錄到tomcat(widows本地安裝tomcat這里就不說明，請自行百度)的webapps下,且把dist目錄修改成剛才第一步配置shop-admin
6、然后在shop-admin目錄下增加目錄WEB-INF,同時目錄中添加web.xml文件，內(nèi)容如下：
7、重啟tomcat
8、瀏覽器輸入地址訪問
背景：
????????很多開發(fā)小伙伴在本地開發(fā)完前端項目后，礙于服務端環(huán)境配置麻煩，想先試試在本地部署，已開發(fā)好的前端項目，由于很多文章都是文字性描述，不太直觀，為了給大多數(shù)新手提供一個教程，本文手把手教你如何在本地實現(xiàn)tomcat部署前端項目。
1、把項目中vite.config.js文件中的base修改為項目名稱
? ? ? ?例如：? ? base:'/shop-admin/',
?
2、有些小伙伴的路由可能需要修改
? ? ?如果項目的router配置hisroty，則需要修改成：history: createWebHistory(‘項目名’)形式。由于我的路由沒有那么配置，就不截圖了。
3、執(zhí)行打包命令
npm run build
4、打完包項目目錄會出現(xiàn)dist目錄
5、復制dist目錄到tomcat(widows本地安裝tomcat這里就不說明，請自行百度)的webapps下,且把dist目錄修改成剛才第一步配置shop-admin
? 例如我的tomcat路徑:? E:\tomcat\apache-tomcat-7.0.72\webapps
6、然后在shop-admin目錄下增加目錄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>/index.html</location>
</error-page>
</web-app>
7、重啟tomcat
8、瀏覽器輸入地址訪問
? ? ?例如我的訪問地址為:?http://localhost:8080/shop-admin/LonginPage文章來源：http://www.zghlxwxcb.cn/news/detail-716061.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-716061.html
到了這里，關(guān)于vite+vue3實現(xiàn) tomcat 的本地部署的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
