vue專案部署到伺服器頁面空白的問題

接觸vue也有一段時間，正好公司有個手機端專案涉及到較多資料處理方面的問題，考慮了一下就打算用vue進行開發，前期也是各種順利，只在兄弟元件間通訊時使用bus.vue中轉的時候出現第一次點選沒有派發事件，考慮可能是點選元素派發使事件，又需點選確認按鈕進行路由跳轉出現的問題，不好解決該問題，使用vuex進行元件間資料通訊，解決問題。

一直到專案上線前都沒有大問題出現，就等部署到部署到伺服器，因為也是第一次使用vue上線的專案對後面的坑也是一無所知，直接使用webpack打包了dist目錄就發給後端部署到伺服器上去了；然後就出現如下問題；

1. 路由跳轉的時候使用mode: 'history'
   去掉#號，放到伺服器crm目錄下，根據www.asa.com/crm路徑訪問，出現獲取不到資源問題，頁面一片空白，搜尋問題，路由配置檔案中新增mode: 'history', base: '/crm/',。
2. 然後資源都獲取到了也都載入了但是頁面還是空白，沒有進行渲染（這個問題好像和問題1相同，當時沒有記錄下來現在回憶起來有點模糊），通過後端配置解決了問題。
3. 頁面渲染成功各頁面跳轉頁都正常了，但是又出現了在當前頁面重新整理都會出現404的問題，因為只有一個index.html檔案，url中的路由跳轉都是vue-router進行在實際檔案中沒有login.html等檔案，伺服器在找這些頁面會找不到出現404錯誤，因此需要後端伺服器配置進行404全部跳轉到index.html解決問題。
4. 閒著沒事有想到問題3，後端到底如何配置的，自己就實現了一遍，以mac下自帶apache為例進行配置
   
   • 到mac下apache安裝路徑/private/etc/apache2/httpd.conf中, （apahce的配置檔案）
     開啟rewrite_module功能，
     LoadModule rewrite_module libexec/apache2/mod_rewrite.so，去掉前面的#；

DocumentRoot "/users/Dev/sites"（設定apache預設指向目錄）
  <Directory "/users/Dev/sites">
      Options Indexes FollowSymLinks Multiviews
      MultiviewsMatch
 
 Any
      AllowOverride All
      Require all granted
    </Directory>

設定AllowOverride All是為了使apache支援.hatccess檔案。
* 在該專案根目錄新增.hatccess檔案（index.html平級），內容跟https://router.vuejs.org/zh-cn/essentials/history-mode.html‘>HTML5 History 模式(vue-router文件舉例)類似，

  <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /crm/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /crm/index.html [L]
</IfModule>

,需要修改的兩個地方，RewriteBase /crm/；
RewriteRule . /crm/index.html [L]，要新增專案所在檔案的檔名，