Vue項目打包部署到apache服務(wù)器的方法步驟
vue項目在開發(fā)環(huán)境下，讓項目運行起來，是通過npm run dev命令，原理是在本地搭建了一個express服務(wù)器。
但是在服務(wù)器上就不是這樣的，必須要通npm run build命令來對整個項目進行打包，打包后會在項目目錄下生成一個dist文件夾，內(nèi)容如下：
然后就是把這些文件丟到服務(wù)器上的某個文件夾下，我這里的文件夾名字是ibms
遇到的問題：
1. 直接去訪問http://www.xxx.com/ibms/，會發(fā)現(xiàn)網(wǎng)頁是白屏的，什么都沒有，這就比較奇怪了，其實是因為資源加載的路徑有問題！
解決方法：
在config中的index.js里build下修改webpack配置：
assetsPublicPath: '/ibms/'
在router中的index.js配置中加上：
export default new Router({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
base: '/ibms/', // 加上這一行
routes: constantRouterMap
})
接下來再重新npm run build打包，然后丟到服務(wù)器上ibms文件夾下，這時頁面就可以正常訪問了。
2. 在當前頁面刷新或者用url欄訪問某個子頁面，結(jié)果發(fā)現(xiàn)網(wǎng)頁404了，這是因為vue路由的mode是history模式。
解決方法：
把所有的請求全部轉(zhuǎn)發(fā)到http://www.xxx.com/ibms/index.html上就可以了
我這里用的是apache做的web服務(wù)器，在ibms目錄下新建.htaccess文件(跟index.html同級)，編輯代碼。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /ibms/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /ibms/index.html [L]
</IfModule>
這個配置的作用就是把所有服務(wù)器上不存在請求全部轉(zhuǎn)發(fā)到index.html上去。（PS：記得要重啟apache服務(wù)器哦）
到此這篇關(guān)于Vue項目打包部署到apache服務(wù)器的方法步驟的文章就介紹到這了,更多相關(guān)Vue項目打包部署到apache內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue鍵盤事件點擊事件加native操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue 中的動態(tài)傳參和query傳參操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了解決如何el-date-picker 寬度溢出瀏覽器問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
laravel5.4+vue+element簡單搭建的示例代碼
本篇文章主要介紹了laravel5.4+vue+element簡單搭建的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了如何在nvue頁面中使用webview組件,并詳細介紹了如何在h5項目中安裝和配置npmiy_uniwebview插件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了Vue組件傳值過程接收不成功的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細介紹了如何在Vue中使用Canvas實現(xiàn)繪制二維碼，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2007-02-02
這篇文章主要介紹了vue-router懶加載速度緩慢問題及解決方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue日期選擇框之時間范圍的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
基于vue實現(xiàn)網(wǎng)站前臺的權(quán)限管理(前后端分離實踐)
這篇文章主要介紹了基于vue實現(xiàn)網(wǎng)站前臺的權(quán)限管理(前后端分離實踐)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01