最近剛重構完,我們的一個項目,由原來的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 MultiviewsMultiviewsMatch AnyAllowOverride AllRequire 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 OnRewriteBase /crm/RewriteRule ^index/.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /crm/index.html [L]</IfModule>
新聞熱點
疑難解答