公司做的oa項目之前是用的dwz框架，后來領導嫌棄頁面太難看，然后就重新做了一版，用的是vue-element-admin
github：https://github.com/PanJiaChen/vue-element-admin
官網：https://panjiachen.github.io/vue-element-admin-site/zh/
預覽地址：https://panjiachen.github.io/vue-element-admin/#/dashboard
用這個框架前，需要安裝node.js環境（npm包管理器）,此部分就不寫了，自行百度
測試環境：
npm run dev 運行的是測試環境，測試環境能調用接口，需要在文件中配置代理，在dev中配置，如下圖：
上面這樣配置只是方便前端在開發的時候獲取數據，正式環境需要配置服務器反向代理
線上環境：
npm run build 運行的是線上環境，線上環境能調用接口，需要在文件中配置代理，在build中配置，如下圖：
運行npm run build前需要把assetsPublicPath 改成 ‘./’，防止生成以后的靜態文件路徑不對，運行完以后，項目路徑中找到打包后的文件，在項目文件的dist文件夾下面的static和index.html就是打包后的文件，只要這部分拷貝到你的項目根目錄下就可以了，我是直接在線上將域名配置到dist下面的
把這個vue項目部署到線上網上查詢了很多資料，都說要反向代理，說用nginx做反向代理，關鍵我們用的apache，網上查了好久沒有查到對應的資料，就自己琢磨了，配置如下圖：
ProxyRequests {On|Off}：
是否開啟apache正向代理的功能；啟用此項時為了代理http協議必須啟用mod_proxy_http模塊。同時，如果為apache設置了ProxyPass，則必須將ProxyRequests設置為Off。
ProxyPass [path] !|url [key=value key=value …]]：
將后端服務器某URL與當前服務器的某虛擬路徑關聯起來作為提供服務的路徑，path為當前服務器上的某虛擬路徑，url為后端服務器上某URL路徑。使用此指令時必須將ProxyRequests的值設置為Off。需要注意的是，如果path以“/”結尾，則對應的url也必須以“/”結尾，反之亦然。
ProxyPassReverse [path] !|url [key=value key=value …]]：
它一般和ProxyPass指令配合使用，此指令使Apache調整HTTP重定向應答中Location, Content-Location, URI頭里的URL，這樣可以避免在Apache作為反向代理使用時，。后端服務器的HTTP重定向造成的繞過反向代理的問題。
< Proxy >容器
< Proxy >容器用於封裝一組proxy相關指令，這些指令主要用於設置訪問權限、負載均衡成員組以及它們的屬性。
上圖配置是指：
訪問oavue.com/api域下的所有請求轉發給http://www.api.com代理
AllowOverride all ：支持url rewirte
Options FollowSymLinks：在該目錄中，服務器將跟蹤符號鏈接。注意，即使服務器跟蹤符號鏈接，它也不會改變用來匹配不同區域的路徑名，如果在;標記內設置，該選項會被忽略
Require all granted：允許所有請求訪問資源
此時訪問oavue.com就可以訪問網站了
apache反向代理參考：https://blog.csdn.net/sforiz/article/details/79651643
備注：assetsPublicPath 改成 './'后生成，部署到線上還是有的部分樣式不顯示，修改如下圖，將紅色部分true改為false，再重新run一遍即可，如下圖：
至此vue項目部署上線完畢，哦也
ps：有興趣的可以關注下我的公眾號和小程序，謝謝啦~~
