windows10 下使用tomcat部署项目

1. 准备工作

1.1 下载tomcat

 下载连接：https://tomcat.apache.org/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");