vuepress部署靜態網站踩坑指南

1. 背景

Q1作了個小項目，自動化輸出一份文檔，把我司某個用戶社區的功能點標記出來，並標上圖中哪塊數據用到哪一個接口。
完成後輸出的方案是作成靜態網站 部署到線上。
由於我這邊是前端，只能拿到後端接口，可能還須要後端或者c端或者其餘端補充文檔，
所以想實現一個，各端同窗都方便修改的方案，
最後敲定，使用markdown編輯，只需push到gitlab，ci就會自動構建，跑vuepress build，生成靜態網站，部署到服務器。

2. 實現方式
初始化項目-》寫好yml->在gitlab配置好ci-》完成個人docker（個人docker其實只是初始化了node的環境）（docker的實如今另外一個文章補充）-》push代碼到gitlab->gitlab ci自動構建 項目 發佈dist下面的文件到服務器-》訪問 www.xxx.com/xxx/xx/xx/index.html -》done

init
    
    ```
    npm init
    npm install vuepress -s-d
    
    ```
    目錄結構

.yml內容

3. 踩到的坑

A 本地調試 vuepress dev docs 報錯 getReshandler。。。(忘記具體說啥了)
    解決過程：statckoverflow搜索
    解決方案：
    安裝

"webpack-dev-middleware": "3.6.0"

B
本地localhost:8080 調試的時候沒毛病
部署到測試服務器 經過 www.xxx.com/xxx/xx/xx/index.html
訪問的時候 先跳正常頁面 而後出現404

一臉懵逼找了半天解決方案。把stackoverflow,sf，google翻了一遍發現沒找到解決方案
心態很崩，甚至想換個工具。
而後抱着試一試的心態本身思考了下緣由。
打印了router 
發現是path對應的component是沒有的

本地不會有這個狀況
因而乎，想了個騷操做，

把to.path對應的跳轉全都redirect到/下
這下會出現一個問題 www.xxx.com/xxx/xx/xx/index.html刷新會跳到 www.xxx.com
這不是我想喲的結果 我確定是想要正常的訪問個人頁面
忽然靈光一現
官網的配置有個base選項

連接描述

天哪由於我一開始不是掛在git上因此一直沒注意...如今我修改了下

好了如今能夠正常訪問了 

C 由於靜態資源上了cdn  因此 html的訪問域名是  www.aa.com ，靜態資源的路徑是 www.bb.com，所以不能用相對路徑，不然根本訪問不到靜態資源
   解決方案：
vuepress支擴展webpack配置

配好後打包的dist對應的引用資源的前綴就會變成publicpath對應的啦~
D
若是實現 www.xxx.com/xxx/xx/xx/index.html 而後直接經過charles代理 在本地調試
而不是loaclhost：8080的方式 好像不行
因dev 命令沒生成 dist文件夾，npm run dev docs以後 引用了 app.js等文件 而不是build 以後那些形式。。不知道怎麼寫
charles規則。（若是有人懂得話歡迎指導一下~~~）
TBC。。。歡迎糾正