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;