windows下部署vue项目(及安装tomcat步骤)

时间:2024-04-09 10:27:54

一:安装tomcat 路径如下:
windows下部署vue项目(及安装tomcat步骤)
二:配置环境变量
1.新建 变量名:CATALINA_HOME 变量值:tomcat的文件夹路径
2.在path中加入;%CATALINA_HOME%\bin
windows下部署vue项目(及安装tomcat步骤)
windows下部署vue项目(及安装tomcat步骤)

三:启动tomcat
1.进入bin下:找到tomcat8w.exe 双击
注:tomcat8.exe 这个文件是用来启动tomcat的,tomcat8w.exe是管理tomcat服务的
2.如果提示:指定的服务未安装 (所以需要在windows下安装tomcat服务)操作如下:
进入cmd 在 bin 文件夹目录下:输入service.bat install 然后再操作第一步

windows下部署vue项目(及安装tomcat步骤)
windows下部署vue项目(及安装tomcat步骤)

windows下部署vue项目(及安装tomcat步骤)
四:验证tomcat安装成功:输入localhost:8080

windows下部署vue项目(及安装tomcat步骤)
五:修改vue项目配置
1.config->index.js 把/ 改为 ./ (根目录)(有两处)
windows下部署vue项目(及安装tomcat步骤)
2.build -> utils.js 新增 publicPath: ‘…/…/’,(第51行左右)
windows下部署vue项目(及安装tomcat步骤)
3.在cmd或者控制在 输入 npm run build 然后会生成 dist文件夹
4.在tomcat的webapps 文件夹 创建一个文件夹 (例如:如下 demo)把dist下的static 和 index.html复制到demo文件夹下
windows下部署vue项目(及安装tomcat步骤)

5.双击tomcat8w.exe 点击stop重启tomcat
6.在浏览器输入:localhost:8080/demo/#/login
windows下部署vue项目(及安装tomcat步骤)