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