vue項目部署到Apache服務(wù)器中遇到的問題解決
最近剛重構(gòu)完，我們的一個項目，由原來的jsp模式改為了前后端分離，前端選型為vue，開發(fā)完成之后第一件時間就是要部署測試，服務(wù)端選的是Apache。本來以為很簡單的一件事情，幾經(jīng)坎坷部署了兩天才算能夠正常訪問了。先記錄如下，
過程搭建Apache環(huán)境，vue項目build之后把生成的dist文件放到，Apache下面，啟動Apache之后本以為能夠正常訪問了，
前提說下：vue項目路由model:history ，默認(rèn)不會出現(xiàn)下面的問題，因?yàn)閭€人感覺項目路徑中帶個#實(shí)在難受
但是發(fā)現(xiàn)錯誤如下：
無法正常訪問，報了一堆404，由于接觸vue項目不久，一臉懵逼，于是百度了一下內(nèi)容如下（vue項目部署到Apache404錯誤）發(fā)現(xiàn)有很多解決方案，最常見的就是增加.htaccess,自己也按照網(wǎng)上方式操作了一遍，反復(fù)更改無效，當(dāng)然有可能是自己配置的方式不對，反正我的是沒有解決。
于是換了一個思路重新搜索了一下，看到了另一篇文章：https://www.cnblogs.com/xyyt/p/7718867.html 茅塞稍微開了一點(diǎn)，我的正常配置如下：
無非就是要把多的那一段路由信息去掉而已，嘗試了如下變態(tài)的修改：
試著重新build發(fā)布一下到Apache，奇跡的事情發(fā)生了，沒問題了，一切正常，當(dāng)然我的修改方式我也感覺不是很妥當(dāng)，當(dāng)實(shí)在找不到合適方式，只能暫時這樣的修改，所有的路徑都按照上面的修改，就能夠正常訪問了
vue項目部署到服務(wù)器頁面空白的問題
- 路由跳轉(zhuǎn)的時候使用mode: 'history'去掉#號，放到服務(wù)器crm目錄下，根據(jù)www.asa.com/crm路徑訪問，出現(xiàn)獲取不到資源問題，頁面一片空白，搜索問題，路由配置文件中添加mode: 'history', base: '/crm/',。
- 然后資源都獲取到了也都加載了但是頁面還是空白，沒有進(jìn)行渲染（這個問題好像和問題1相同，當(dāng)時沒有記錄下來現(xiàn)在回憶起來有點(diǎn)模糊），通過后端配置解決了問題。
- 頁面渲染成功各頁面跳轉(zhuǎn)頁都正常了，但是又出現(xiàn)了在當(dāng)前頁面刷新都會出現(xiàn)404的問題，因?yàn)橹挥幸粋€index.html文件，url中的路由跳轉(zhuǎn)都是vue-router進(jìn)行在實(shí)際文件中沒有l(wèi)ogin.html等文件，服務(wù)器在找這些頁面會找不到出現(xiàn)404錯誤，因此需要后端服務(wù)器配置進(jìn)行404全部跳轉(zhuǎn)到index.html解決問題。
- 閑著沒事有想到問題3，后端到底如何配置的，自己就實(shí)現(xiàn)了一遍，以mac下自帶apache為例進(jìn)行配置
- 到mac下apache安裝路徑/private/etc/apache2/httpd.conf中, （apahce的配置文件）
開啟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文件。
* 在該項目根目錄添加.hatccess文件（index.html平級），內(nèi)容跟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]，要添加項目所在文件的文件名，
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺談vue自定義全局組件并通過全局方法 Vue.use() 使用該組件
本篇文章主要介紹了vue自定義全局組件并通過全局方法 Vue.use() 使用該組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
VUE實(shí)現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情
這篇文章主要為大家介紹了VUE實(shí)現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
今天小編就為大家分享一篇vue遍歷對象中的數(shù)組取值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue3屬性綁定方法解析，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了詳解vue的數(shù)據(jù)binding原理介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字翻頁動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
利用Vue實(shí)現(xiàn)一個markdown編輯器實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于如何利用Vue實(shí)現(xiàn)一個markdown編輯器的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了Vue下拉菜單組件化開發(fā)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vuex 實(shí)現(xiàn)getter值賦值給vue組件里的data示例
今天小編就為大家分享一篇vuex 實(shí)現(xiàn)getter值賦值給vue組件里的data示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本文給大家分享我使用vscode開發(fā)的一些配置。其中包括uniapp組件語法提示，uniapp代碼提示，代碼自動格式化問題，對vscode 開發(fā)uniapp的相關(guān)知識感興趣的朋友一起看看吧2021-08-08