vue项目前后端部署

一.前端打包

1. 前端本地打包:  

npm run build

2.生成dist目录包

 

 

3.打成zip包后上传到服务器

二.部署到nginx

1.修改nginx配置文件

vim /etc/nginx/nginx.conf 

2.新增server配置项

server {
              listen 8080;     #1.你想让你的这个项目跑在哪个端口
              server_name 10.200.200.251;     #2.当前服务器ip
       location / {
           root   /home/dist/;     #3.dist文件的位置(我是直接放在home目录下了) 
            try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写),解决vue的mode为history时,报404问题
       }
        location /api {  #4.当请求跨域时配置端口转发
            proxy_pass http://10.210.235.252:8848/api; #5.转发地址  }  }

注意: 标黄色部分是配置转发到后端的服务,即当页面访问http://168.0.0.1:8080/api时,nginx会转发到http://168.0.0.2:8848/api这个地址,即这个是后端的地址.

问题: vue的mode是hisotry时报404,解决如下:

 

location / {
　　root  D:\Test\exprice\dist;
　　index index.html index.htm;
　　try_files $uri $uri/ /index.html;

 

 

 

三.后端配置

1.在application.yml文件中配置:默认所有api请求都要加一个前缀/api才能访问到

#server配置
server:
  max-http-header-size: 4048576
#  servlet.context-path: /api
  port: 9848

2.springboot打成jar包: mvn install -Dmaven.test.skip=true

3.放到服务器上10.210.235.252

4.启动jar包:

nohup ${JAVA_HOME}/bin/java -jar tds.service.jar --spring.profiles.active=prod -Xmx2g -Xms2g -XX:PermSize=128m -XX:MaxPermSize=256m -XX:+DisableExplicitGC -XX:+UseParNewGC -XX:+UseConcMarkSweepGC -XX:+PrintGCDetails -XX:+PrintTenuringDistribution -XX:+PrintGCTimeStamps -XX:+HeapDumpOnOutOfMemoryError -XX:HeapDumpPath=logs/dumps -jar $APP_NAME > /dev/null 2>&1 &

以上,即可完成前后端部署配置

location / {

　　root  D:\Test\exprice\dist;

　　index index.html index.htm;

　　try_files $uri $uri/ /index.html;