vue項目部署到Apache服務器中遇到的問題解決

最近剛重構完，我們的一個項目，由原來的jsp模式改為了前后端分離，前端選型為vue，開發完成之后第一件時間就是要部署測試，服務端選的是Apache。本來以為很簡單的一件事情，幾經坎坷部署了兩天才算能夠正常訪問了。先記錄如下，

過程搭建Apache環境，vue項目build之后把生成的dist文件放到，Apache下面，啟動Apache之后本以為能夠正常訪問了，

前提說下：vue項目路由model:history ，默認不會出現下面的問題，因為個人感覺項目路徑中帶個#實在難受

但是發現錯誤如下：

無法正常訪問，報了一堆404，由于接觸vue項目不久，一臉懵逼，于是百度了一下內容如下（vue項目部署到Apache404錯誤）發現有很多解決方案，最常見的就是增加.htaccess,自己也按照網上方式操作了一遍，反復更改無效，當然有可能是自己配置的方式不對，反正我的是沒有解決。

于是換了一個思路重新搜索了一下，看到了另一篇文章：https://www.cnblogs.com/xyyt/p/7718867.html 茅塞稍微開了一點，我的正常配置如下：

無非就是要把多的那一段路由信息去掉而已，嘗試了如下變態的修改：

試著重新build發布一下到Apache，奇跡的事情發生了，沒問題了，一切正常，當然我的修改方式我也感覺不是很妥當，當實在找不到合適方式，只能暫時這樣的修改，所有的路徑都按照上面的修改，就能夠正常訪問了

vue項目部署到服務器頁面空白的問題

• 路由跳轉的時候使用mode: 'history'去掉#號，放到服務器crm目錄下，根據www.asa.com/crm路徑訪問，出現獲取不到資源問題，頁面一片空白，搜索問題，路由配置文件中添加mode: 'history', base: '/crm/',。
• 然后資源都獲取到了也都加載了但是頁面還是空白，沒有進行渲染（這個問題好像和問題1相同，當時沒有記錄下來現在回憶起來有點模糊），通過后端配置解決了問題。
• 頁面渲染成功各頁面跳轉頁都正常了，但是又出現了在當前頁面刷新都會出現404的問題，因為只有一個index.html文件，url中的路由跳轉都是vue-router進行在實際文件中沒有login.html等文件，服務器在找這些頁面會找不到出現404錯誤，因此需要后端服務器配置進行404全部跳轉到index.html解決問題。
• 閑著沒事有想到問題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]，要添加項目所在文件的文件名，

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。