vuepress生成靜态檔案 部署到nginx 反向代理伺服器

最近apex英雄很火，個人搞了一個小破站，用國外tracker網站的api做了一個戰績查詢工具，并添加了一鍵舉報。

最近想寫個部落格，因為一直對vue情有獨鐘就想看看有沒有什麼開源的部落格工具。

搜尋一番發現了vuepress，然後才發現原來很多開源的vue元件或者工具的文檔都是用這個來寫的。。。

最終效果

http://m.apex-asst.top/doc/

但是發現由于這個極其适合部署在github pages上就沒人寫怎麼部署在nginx上，稍微踩了一點坑總結一下。官方部署的文檔連結

基本配置

主要關注配置中的

base

類型: string

預設值: /

部署站點的基礎路徑，如果你想讓你的網站部署到一個子路徑下，你将需要設定它。如 Github pages，如果你想将你的網站部署到 https://foo.github.io/bar/，那麼 base 應該被設定成 “/bar/”，它的值應當總是以斜杠開始，并以斜杠結束。

base 将會自動地作為字首插入到所有以 / 開始的其他選項的連結中，是以你隻需要指定一次。

這個配置是最基本的路由的配置，vuepress同vue其他項目一樣都是單頁應用，通過配置這個來解決基礎路由的問題。我遇到的問題也就是在nginx上如何配置這個路由。

nginx上配置

base配置為"/"

相應的nginx配置十分簡單，直接指定端口如下面示例的8081，并指定root路徑（即build後放在伺服器的路徑）。

server {
		listen 8081;
		location / {
				root /root/product/doc/dist;
				try_files $uri $uri/ /index.html;
				index index.html index.htm;
			}
    }
           

base配置為"/doc"

比如本站，配置的為/doc，配置也很簡單，隻需要上面的location由/改為/doc/，注意最後一個斜杠

同時部署了兩個vue服務

如本站"/"這個目錄是有一個vue服務的，現在又想在同樣的端口配置vuepress并且路徑是/doc應該怎麼辦呢

下面是nginx的配置

server {
        listen 80;
        server_name apex-asst;
    
        client_max_body_size 20m;
        charset utf-8;
    
        #root /root/product;
    
        location / {
	    root /root/product/dist;
            try_files $uri $uri/ /index.html;
	    index index.html;
        }

        location @rewrites {
            rewrite ^(.+)$ /index.html last;
        }
		
#配置了轉發
		location /doc/ {
			proxy_pass http://localhost:8081/;
		}
    
    }
#在8081上起了vuepress
    server {
		listen 8081;
		location / {
				root /root/product/doc/dist;
				try_files $uri $uri/ /index.html;
				index index.html index.htm;
			}
    }