vue+springmvc项目部署到tomcat7

太过爱你忘了你带给我的痛 2021-05-16 20:36 598阅读 0赞

# 部署方式有两种 #

1.  前后端分离部署；
2.  前后端一起部署；

## 那么有什么区别呢？ ##

讲一下个人理解，前后端分离拒他人说要暴露两个端口，但是实际上我部署的时候根本没遇到这个问题。。。而且我觉得前后端分离部署，对于后续修改都方便很多。  
前后端合并部署，就是把vue前端打包放到springmvc项目里，再把springmvc打包部署到tomcat，也就是说只要往tomcat部署一次。

# 以下部署方法是我个人实现的，如果不适用，非常抱歉。 #

## 前后端分离部署 ##

后端使用springmvc框架开发，开发完后结构如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70]  
然后只要简单的使用mvn进行clean 和 打包就行了  
![在这里插入图片描述][20200516000628515.png]  
clean完成后，我是在tomcat服务器运行了一遍项目后打包才能用的。当然这一步也保证了你的项目没问题可以跑，部署出错也不会是项目的问题  
![在这里插入图片描述][20200516000754434.png]  
打包  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 1]  
完了之后target目录生成对应的war包  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 2]  
下一步修改tomcat的配置文件，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][20200516001148442.png]  
![在这里插入图片描述][2020051600121139.png]  
在里边修改端口，我的是8090，host里添加一行配置信息，中间是war包名，我的path设置有问题，但是不影响使用，毕竟不想深究

接下来拷贝war包或者运行后target下会直接产生对应的文件夹，这和tomcat解压结果是一样的，所以直接放过去就好。二选一即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 4]  
选定后放到webapps，如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 5]  
至此部署完成，进入bin目录运行start.bat，如果不报错基本上就是没问题  
![在这里插入图片描述][2020051600180479.png]  
这时候前后端分离部署的优点体现出来了，我们只部署了springmvc，但是它也只是提供数据和接口，所以我们接着启动前端项目能访问到数据就是没问题，  
注意这里的访问路径会多了一个war包名

比如之前是http://localhost:8090/details
    部署后是http://localhost:8090/com.hao.spring/details

没有界面，当然可以提前写一个以便于测试,访问到就是没问题。  
![在这里插入图片描述][20200516002315964.png]  
接下来部署前端，  
由于我使用的hbuilder新建的项目，所以好像有些配置文件没有，因此我自己新建了conf目录，再新建了index.js  
内容如下

var path = require('path')
     
    module.exports = { 
      build: { 
        index: path.resolve(__dirname, 'dist/index.html'),
        assetsRoot: path.resolve(__dirname, 'dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/com.hao.web/',
        productionSourceMap: true
      },
      dev: { 
        port: 8091,
        proxyTable: { }
      }
    }

然后进入项目目录，使用npm run build进行打包  
![在这里插入图片描述][20200516002634603.png]  
打包完形成dist文件夹，下边有一些文件，  
![在这里插入图片描述][20200516002738469.png]  
我们在tomcat的webapps下新建一个文件夹比如叫com.hao.web这个就类似于之前war包的名字，也就是你要访问的时候使用的项目名  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 6]  
把dist下的文件放进去，记得修改一下index.html文件，具体修改内容是在每个src上加上你新建的目录文字，不然应该会报出找不到css什么的错误。  
![在这里插入图片描述][20200516003357996.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 7]  
这样就部署完了，运行方法同上，启动tomcat，访问你的首页  
比如http://localhost:8090/com.hao.web/，访问成功就表示部署成功。  
（**你会发现这里用的也是8090，所以我不懂为什么说分离部署会开两个端口。。。，只有在开发的时候才有两个端口，要不然启动的时候会端口冲突**）  
在部署的时候要学会看错误，我是打开浏览器的console对着错误一步步解决的，在这里我部署的时候还遇到了img访问不到，因为index.html里也没有用到img，所以我干脆直接把img文件夹拿出来放到webapps了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 8]  
附上我丑丑的界面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 9]  
还有日志里显示被获取的数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 10]

## 前后端合并部署 ##

合并部署第一步同上，打包vue项目  
将dist下的东西放到springmvc项目的webapp目录，  
![在这里插入图片描述][2020051600374242.png]  
然后因为我之前没有写前端样式，所以放进去之后提示找不到css这些，于是我在springmvc.xml里加了一些配置信息

<mvc:resources location="../css/" mapping="../css/**"/>
        <mvc:resources location="../js/" mapping="../js/**"/>
        <mvc:resources location="../img/" mapping="../img/**"/>
        <mvc:resources location="../fonts/" mapping="../fonts/**"/>
        <mvc:resources location="/" mapping="/**"/>

接着试着运行项目，确定可以访问到前端页面，数据交互没问题之后再照着上边打包springmvc成war包，部署同上，如果提示找不到css，同样修改index.html。

访问链接同上一个部署方法

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70]: /images/20210516/4c435dc5af8448c69f6dd882c0f39bfb.png
[20200516000628515.png]: /images/20210516/e5f8d258c5bd4431823f7bbd6024e8fb.png
[20200516000754434.png]: /images/20210516/e697eab049164fff9f7957464cdc4fb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 1]: /images/20210516/75fce11d8ca24615888415c90d610b8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 2]: /images/20210516/9df38dc9f31747c59a45b8f6d8cad186.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 3]: /images/20210516/7d34f34bcdb34edeb20d6c83028cb824.png
[20200516001148442.png]: /images/20210516/81b70a133a0245d0b08d187e0bca71af.png
[2020051600121139.png]: /images/20210516/17c024193fb54b168c230c3643fdce12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 4]: /images/20210516/e181ef970ce74dc29a2b26514103c384.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 5]: /images/20210516/3458527635744a8cb027df0e0fd74dd3.png
[2020051600180479.png]: /images/20210516/bf1809e3ca1b4f03a7f4269744d00f81.png
[20200516002315964.png]: /images/20210516/7375abd235064fa9babd3609d8c73e47.png
[20200516002634603.png]: /images/20210516/3426640294a34a9eaeb79c0200b5f335.png
[20200516002738469.png]: /images/20210516/b48324ee595d4bbda96bb6f00493cebd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 6]: /images/20210516/227d4b62e202400da4d4a63ad3e83479.png
[20200516003357996.png]: /images/20210516/1dc0ec09ba4f46978870ce1cc875c233.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 7]: /images/20210516/61c1a14d8b9645c08c3d8662b456c436.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 8]: /images/20210516/4415040b64e843e6b83bad94685d2926.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 9]: /images/20210516/b5a3328437314a8a88774ce9958a5c59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 10]: /images/20210516/d387b6b069844bd1b874fb822fb37794.png
[2020051600374242.png]: /images/20210516/10dae68459ac47e4b0793747e27211dc.png