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)文章
在 Typescript 中使用可被復(fù)用的 Vue Mixin功能
這篇文章主要介紹了在 Typescript 中使用可被復(fù)用的 Vue Mixin功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
Vue封裝Swiper實(shí)現(xiàn)圖片輪播效果
圖片輪播是前端中經(jīng)常需要實(shí)現(xiàn)的一個(gè)功能。最近學(xué)習(xí)Vue.js，就針對(duì)Swiper進(jìn)行封裝，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片輪播組件。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
在Web開(kāi)發(fā)中,跨域問(wèn)題是一大挑戰(zhàn),跨域是指網(wǎng)絡(luò)請(qǐng)求從一個(gè)域名發(fā)起,而請(qǐng)求的目標(biāo)資源位于另一個(gè)不同的域名下,通常使用Vue CLI的代理來(lái)解決跨域問(wèn)題,而在生產(chǎn)環(huán)境中,可以通過(guò)后端配置CORS或使用Nginx反向代理,或者通過(guò)服務(wù)器中轉(zhuǎn)來(lái)解決跨域問(wèn)題2023-10-10
Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
詳解vuex 中的 state 在組件中如何監(jiān)聽(tīng)
本篇文章主要介紹了詳解vuex 中的 state 在組件中如何監(jiān)聽(tīng)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
基于 flexible 的 Vue 組件：Toast -- 顯示框效果
這篇文章主要介紹了基于 flexible 的 Vue 組件：Toast -- 顯示框效果,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了Vuex 進(jìn)階之模塊化組織詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了vue中使用js-doc的相關(guān)知識(shí)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2024-01-01
vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路詳解
最近領(lǐng)導(dǎo)提了一個(gè)新需求:仿照e簽寶,實(shí)現(xiàn)pdf電子簽章,本文給大家介紹vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue中van-picker的選項(xiàng)插槽的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01