因为想做一个前后端整合的piclive项目，所以先记录一下部署步骤，方便以后服务器迁移或者开发项目出现分支的时候参考一下。当然以下都是我自己的总结，如果大家觉得有什么不对劲的地方，欢迎大家指出一下。谢谢您查阅本文章·
部署简单来说主要分为4个步骤。分别是前端的vue路由配置，后端的Java数据源、访问路径的配置，tomcat的host节点配置(主要是要修改path属性)，还有nginx的配置前端后端转发。当然这些部署对于时下流行的前后端部署，服务器中的tomcat配置和nginx前后端的转发操作具有非常相似的情况，所以作为其他项目的部署也同样适用。
部署：
前端：
1、修改vue.config.js 中的publicPath 值 ，即二级目录地址。
publicPath: process.env.NODE_ENV === "production" ? "/test-front-prod/" : "/test-front-dev/", ...
2、修改路由router/index.js 的mode值改为hash。
export default new Router({
mode: 'hash',
...
3、修改UI根目录下的.env.development和.env.production 的
VUE_APP_BASE_API = '/test-war' #后端api地址
后端：
1、# 应用的访问路径，一般就在spring的yml配置里
context-path:/test-war #对应前端3中的后端api地址
tomcat：
1、使用java项目管理器部署tomcat的后端项目,设置好端口，比如8080，域名随便填，因为用来转发的，所以对实际不影响。修改Tomcat的编码，Catalina.sh里面的set "JAVA_OPTS=%JAVA_OPTS% %JSSE_OPTS% 后面追加 -Dfile.encoding=UTF-8。
2、修改配置文件：主要是修改path属性，要跟前端3中的路径一样才能访问！
<Host autoDeploy="true" name="是域名也可以是ip，在tomcat中唯一" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false">
<Context crossContext="true" docBase="/www/wwwroot/随便一个文件夹都可以" path="/test-war" reloadable="true" />
</Host>
nginx：
1、放置前端文件到某个目录下
2、修改配置文件
location ^~ /test-front-prod {
alias 步骤1中的绝对路径，比如/www/wwwroot/hi.com/test-front-prod;
index index.html;
try_files $uri $uri/ @test-front-prod;
}
location ^~ /test-war {
proxy_pass http://tomcat中的name，也就是域名:8080/test-war;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
#proxy_set_header Host $http_host; 这里要跟tomcat的name一样才能解析成功。我在这里卡了一段时间。。。
proxy_set_header Host “tomcat中的name，也就是域名 ”
}
