1. 程式人生 > 實用技巧 >記載一次前後端分離(SSM+VUE+nginx)部署在本地電腦上的實現

記載一次前後端分離(SSM+VUE+nginx)部署在本地電腦上的實現

1.環境搭建

tomcat ---------- 安裝,部署,配置環境變數

nginx --------- 解壓就行

2.配置檔案修改

vue 裡面 vue.config.js

module.exports = {
    //本地執行dist檔案需要
    // publicPath: process.env.NODE_ENV === 'production'
    // ? './'
    // : '/'
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
    }
}

去掉註釋可以在本地執行dist檔案,沒去的本地執行有可能導致靜態資源載入不了

nginx裡面的 nginx.conf

server {

	listen       80;                     #指定監聽的埠號,80表示基本
	server_name  www.xzxy.com;              #自定義伺服器地址名
	
	root         D:/002/xiao_zhi_campus_v4/dist;                     #指向本地工作目錄,這裡因為我放到根目錄下了,所以不配置
    index        index.html;                        #開啟預設檔案加 index.html
	
	# 官網介紹設定這條可以解決history路由的問題
	location / {
		try_files $uri $uri/ @router;
		index  index.html index.htm;
	}
	location @router {
		rewrite ^.*$ /index.html last;
	}
	
	location /a {
		proxy_pass http://127.0.0.1:58080/xiaozhi/a;
		client_max_body_size 500m;
		proxy_read_timeout 300;
		proxy_connect_timeout 300;
		proxy_redirect     off;
		#nginx在接收到瀏覽器請求後,把請求轉發給後端真實服務節點,服務節點響應後的返回
		proxy_set_header           Host $host;
		proxy_set_header           X-Real-IP $remote_addr;
		proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;
	}
	
	location /xiaozhi{
	  proxy_pass   http://127.0.0.1:58080/xiaozhi;
	  #proxy_redirect http://106.14.33.68:8080/xiaozhi #http://106.14.33.68:8080/xiaozhi;
	  proxy_set_header X-Real-IP $remote_addr;
	  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	  client_max_body_size 500m;
	}
	location /userfiles {  
	  proxy_pass    http://127.0.0.1:58080/xiaozhi/userfiles;
	  proxy_redirect off; #default;
	  proxy_set_header X-Real-IP $remote_addr;
	  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	  client_max_body_size 500m;
	}
	
	error_page   500 502 503 504  /50x.html;
	location = /50x.html {
	   root   html;
	}
	

}

tomcat 裡面的catalina.sh

CATALINA_OPTS=-Djava.awt.headless=true