Nginx与Tomcat部署Vue前后端分离应用_nginx部署vue项目访问后端tomcat

方式一 Nginx（后端应用也需要独立部署，可以部署在tomcat）

1.vscode 打包vue项目

运行 npm run build 打包出项目部署文件

2.修改配置文件 nginx.conf

在server中加入以下配置，然后start nginx

 
location / {
            root   D:\dist;   //vue build出来的文件放置路径
            index  index.html index.htm;   //默认页面文件
}
 
//webAppName表示vue 请求的baseUrl，转发到proxy_pass的后端路径
location /webAppName/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8080/webAppName/;  //填后端应用url 
}

方式二 Tomcat（前后端应用统一部署在tomcat）

1.同上打包vue项目

2.在后端应用的WEB-INF/classes路径下新建static目录，将vue打包出来app目录内的文件放置在static目录下。相当与vue打包出来的作为后端应用的静态资源访问(项目/index.html)。

3.运行tomcat