vue項目打包後 使用nginx部署

Nginx的安裝與配置

Nginx官網下載所需版本安裝

解壓下載好的nginx

修改nginx配置文件，配置文件爲conf下的nginx.conf,修改nginx.conf中的server配置片段

 

 

裏面的相關注釋是在是太多了，那麼我把所有的註釋清除一下(這是方便看清nginx配置到底需要什麼基礎的配置)

worker_processes  1; ##指明瞭nginx要開啓的進程數,不用修改，但考慮到實際情況，可以修改這個數值，以提高性能

events {
    worker_connections  1024;##最大連接數
}

####設置http服務器
http {
    server_names_hash_bucket_size 64; #擴大緩存
    include       mime.types; ##文件擴展名與文件類型映射表
    default_type  application/octet-stream; ##默認文件類型

    sendfile        on; ##開啓文件高效傳輸模式防止網絡及磁盤I/O阻塞，提升Nginx工作效率
    keepalive_timeout  65; ##超時時間

    upstream  test {  #服務器集羣名字   
	ip_hash; 
	server  47.111.111.111:8180 ; #api接口端口配置 
    } 

    #虛擬主機
    server {
        listen       80; ##表示的項目所佔用的端口
        server_name  localhost; ##項目域名或者ip

        location / {
            root   html;   #表示你的項目文件所處於的位置,在windows下面表示的是與conf目錄處於同一級
            index  index.html index.htm; #默認打開index.html
        }

	location /api {
		add_header 'Access-Control-Allow-Origin' '*';#添加接口跨域
		proxy_pass http://test; #服務器集羣名字
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		 } 

        error_page 404 /index.html; #這個配置，預防頁面刷新後跳轉到404頁面
        
    }
    ####如果包含多個項目，只需要多寫一個server即可，注意server_name不能相同
}

 

直接雙擊nginx.exe運行（會有個黑塊一閃而過，正常現象）

也可以使用命令運行 首先要切換到nginx的目錄中

啓動：start nginx.exe 

停止：nginx.exe -s stop 

重新加載：nginx.exe -s reload

測試nginx是否正常運行

瀏覽器輸入server_name配置的地址加80 ，顯示welcome，已經配置成功

 

vue項目打包部署

npm run build

項目打包完成後，將dist文件夾部署服務器，

修改nginx 配置文件中的 location 

location / {
            root   E:/workSpace/**/dist;   #寫入你部署文件夾路徑
            index  index.html index.htm; #默認打開index.html
 }

每次配置完都要 重新加載nginx：nginx.exe -s reload

再次訪問配置好的地址加80即可訪問到對應的vue項目

 

注：

1，域名解析ip需要和部署nginx的服務器ip相同。

2，與tomcat並存施，會提示80端口被佔用，解決方案改變tomcat端口號，微信環境下只支持80端口。