admin管理员组文章数量:1581066
1. 准备工作
1.1 下载tomcat
下载连接:https://tomcat.apache/download-80.cgi
这里最新的版本是9.0往上,这里我习惯性的选择了7.0版本。然后根据自己的电脑配置选择合适的zip安装包,我的电脑配置是windows10 64位操作系统
下载完成后我们将其解压至自己想放置的文件夹中:
1.2 配置tomcat环境变量
依次点击-->此电脑-->属性-->高级系统设置-->环境变量-->Path(系统变量)
注意这里我们指向的是tomcat安装路径下的bin文件夹
1.3 启动Tomcat
我们跳转至tomcat安装路径下的bin文件夹中,点击startup windows批处理文件
然后我们打开浏览器输入http://localhost:8080,我们可以看到如下画面,就代表我们tomcat安装成功了
1.4 打包前端vue项目
这里vue项目如何再windows系统下开发环境搭建不做过多的介绍,具体有不了解的小伙伴可以参考其他资料
我们再命令行中输入 cnpm run build 或者 npm run build指令实现项目打包
注意:cnpm指令使用前必须先配置npm 的淘宝镜像
同时也不是所有的vue项目打包都是这样的,具体要看项目架构,比如我当前这个项目:
这里我们使用的打包命令就是:cnpm run build:prod 或者 cnpm run build:sit
打包完成后我们看到的项目结构如下:
2. 部署vue项目到Tomcat中
这里我们将上面打包的文件夹打开,可以看到里面只有两个文件夹
我们将再tomcat安装目录的webapps文件夹下创建digital文件夹并将这里面的内容复制进去
跳转至tomcat的bin目录下启动tomcat,我们可以看到如下内容:
这里存在中文乱码问题,因为不是此博文的重点,这里不予处理
我们可以看到我们添加进去的项目已经被成功启动
我们在浏览器中输入:http://localhost:8080/digital/就可以启动项目了,这里需要注意的是连接的端口号是tomcat的端口号
到这里,我们使用tomcat启动前端项目已经完成
3. 爬坑之路
3.1 静态资源问题
这里我们已经完成项目部署,但是我们在登录系统后发现一个问题,就是系统中的静态资源报警404,也就是路径找不到:
这里主要的问题是我们开发过程中使用的是相对路径等,会存在项目部署后找不到指定路径的问题,如果静态资源不是很多的时候,可以使用如下方式:
// http:192.168.1.61:9527
var hostIPAndPort = window.location.origin
// 部署在服务器的前台项目名,通常开发环境为'/',生产环境为'/projectname/'
var pathName = window.location.pathname
ht.Default.setImage("lv", hostIPAndPort + pathName + "static/image/lv.png");
版权声明:本文标题:windows10 下使用tomcat部署项目 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1727874474a1135060.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论