前端： Vue

1.开发环境下 本机前后台联调

不打包部署的情况下实现在本机的前后端联调仅仅需要配置下述代码即可解决跨域，正常访问后端的程序

在index.js文件下配置下述代码即可

module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/lottery/', proxyTable: { '/api':{ target:'http://localhost:8088', //后台部署的端口号 changeOrigin: true,//是否跨域 secure:false, pathRewrite:{ '^/api':'/api' } } },//设置反向代理，解决跨域 // Various Dev Server settings host: 'localhost', //前端IP port: 8080, // 前端所部署到的端口号 autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

 

2.生产环境下 前后端打包部署上线

 1. 打包

  控制台运行命令： npm run build 打包完成会在项目的 dist文件下生成下述文件

 

2.把整个dist文件移到tomcat上进行部署即可

  即移到tomcat文件下的  WebApps下

 

3.解决跨域问题

用到 Nginx tomcat

在上线的情况下需要通过Nginx来解决跨域问题

1> 配置Nginx 

安装Nginx  见  https://www.cnblogs.com/qfb620/p/5508468.html

使Nginx监听83端口  location里的配置是把监听过来的请求转发到对应的端口 Nginx中只需要配置下面的内容即可

server { listen 83; #监听83端口，可以改成其他端口 server_name localhost; # 当前服务的域名(nginx所在服务器域名) #charset koi8-r; #access_log logs/host.access.log main; location / { proxy_pass http://localhost:8080;#代理项目部署的地址(这里项目部署在了当前服务器tomcat上,端口8080) proxy_redirect default; } location /api { #添加访问目录为/api的代理配置,使以“/api”开头的地址都转到“http://192.168.1.111:8080”上 rewrite ^/api/(.*)$ /$1 break; proxy_pass http://192.168.1.111:8080; //192.168.1.111是内网Ip } }

2>配置Tomcat

把Vue打包后的 dist下的内容放到 WebApps下

访问的网址即为  http://188.131.238.237:83/lottery/#/index Vue中写的端口号为Nginx的端口号 83为Nginx监听端口

 

解决跨域问题可参考  https://www.cnblogs.com/xiaoxiaossrs/p/8902535.html

 

到此前端即部署完成

 

后端: Spring Boot

 我所采用的是利用 Maven来进行项目打包

在Eclipse中打包

1.

打包后 打包的文件会在 target下显示

接着直接把target放到部署的位置上在控制台上运行即可

 java -jar （target的位置）/lottery_Service-0.0.1-SNAPSHOT.jar 

可参考 https://blog.csdn.net/qq_36462955/article/details/83650567

到此后端即部署完成