最近剛重構(gòu)完，我們的一個(gè)項(xiàng)目，由原來(lái)的jsp模式改為了前后端分離，前端選型為vue，開(kāi)發(fā)完成之后第一件時(shí)間就是要部署測(cè)試，服務(wù)端選的是Apache。本來(lái)以為很簡(jiǎn)單的一件事情，幾經(jīng)坎坷部署了兩天才算能夠正常訪問(wèn)了。先記錄如下，

過(guò)程搭建Apache環(huán)境，vue項(xiàng)目build之后把生成的dist文件放到，Apache下面，啟動(dòng)Apache之后本以為能夠正常訪問(wèn)了，

前提說(shuō)下：vue項(xiàng)目路由model:history ，默認(rèn)不會(huì)出現(xiàn)下面的問(wèn)題，因?yàn)閭€(gè)人感覺(jué)項(xiàng)目路徑中帶個(gè)#實(shí)在難受

但是發(fā)現(xiàn)錯(cuò)誤如下：

無(wú)法正常訪問(wèn)，報(bào)了一堆404，由于接觸vue項(xiàng)目不久，一臉懵逼，于是百度了一下內(nèi)容如下（vue項(xiàng)目部署到Apache404錯(cuò)誤）發(fā)現(xiàn)有很多解決方案，最常見(jiàn)的就是增加.htaccess,自己也按照網(wǎng)上方式操作了一遍，反復(fù)更改無(wú)效，當(dāng)然有可能是自己配置的方式不對(duì)，反正我的是沒(méi)有解決。

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

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

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

vue項(xiàng)目部署到服務(wù)器頁(yè)面空白的問(wèn)題

• 路由跳轉(zhuǎn)的時(shí)候使用mode: 'history'去掉#號(hào)，放到服務(wù)器crm目錄下，根據(jù)www.asa.com/crm路徑訪問(wèn)，出現(xiàn)獲取不到資源問(wèn)題，頁(yè)面一片空白，搜索問(wèn)題，路由配置文件中添加mode: 'history', base: '/crm/',。
• 然后資源都獲取到了也都加載了但是頁(yè)面還是空白，沒(méi)有進(jìn)行渲染（這個(gè)問(wèn)題好像和問(wèn)題1相同，當(dāng)時(shí)沒(méi)有記錄下來(lái)現(xiàn)在回憶起來(lái)有點(diǎn)模糊），通過(guò)后端配置解決了問(wèn)題。
• 頁(yè)面渲染成功各頁(yè)面跳轉(zhuǎn)頁(yè)都正常了，但是又出現(xiàn)了在當(dāng)前頁(yè)面刷新都會(huì)出現(xiàn)404的問(wèn)題，因?yàn)橹挥幸粋€(gè)index.html文件，url中的路由跳轉(zhuǎn)都是vue-router進(jìn)行在實(shí)際文件中沒(méi)有l(wèi)ogin.html等文件，服務(wù)器在找這些頁(yè)面會(huì)找不到出現(xiàn)404錯(cuò)誤，因此需要后端服務(wù)器配置進(jìn)行404全部跳轉(zhuǎn)到index.html解決問(wèn)題。
• 閑著沒(méi)事有想到問(wèn)題3，后端到底如何配置的，自己就實(shí)現(xiàn)了一遍，以mac下自帶apache為例進(jìn)行配置
  • 到mac下apache安裝路徑/private/etc/apache2/httpd.conf中, （apahce的配置文件）

開(kāi)啟rewrite_module功能，

LoadModule rewrite_module libexec/apache2/mod_rewrite.so，去掉前面的#；

DocumentRoot "/users/Dev/sites"（設(shè)置apache默認(rèn)指向目錄）
<Directory "/users/Dev/sites">
Options Indexes FollowSymLinks Multiviews
MultiviewsMatch Any
AllowOverride All
Require all granted
</Directory>

設(shè)置AllowOverride All是為了使apache支持.hatccess文件。

* 在該項(xiàng)目根目錄添加.hatccess文件（index.html平級(jí)），內(nèi)容跟https://router.vuejs.org/zh-cn/essentials/history-mode.html‘>HTML5 History 模式(vue-router文檔舉例)類(lèi)似，

<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>

,需要修改的兩個(gè)地方，RewriteBase /crm/；

RewriteRule . /crm/index.html [L]，要添加項(xiàng)目所在文件的文件名，

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。