Vue項(xiàng)目打包部署到apache服務(wù)器的方法步驟
vue項(xiàng)目在開發(fā)環(huán)境下，讓項(xiàng)目運(yùn)行起來，是通過npm run dev命令，原理是在本地搭建了一個express服務(wù)器。
但是在服務(wù)器上就不是這樣的，必須要通npm run build命令來對整個項(xiàng)目進(jìn)行打包，打包后會在項(xiàng)目目錄下生成一個dist文件夾，內(nèi)容如下：
然后就是把這些文件丟到服務(wù)器上的某個文件夾下，我這里的文件夾名字是ibms
遇到的問題：
1. 直接去訪問http://www.xxx.com/ibms/，會發(fā)現(xiàn)網(wǎng)頁是白屏的，什么都沒有，這就比較奇怪了，其實(shí)是因?yàn)橘Y源加載的路徑有問題！
解決方法：
在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. 在當(dāng)前頁面刷新或者用url欄訪問某個子頁面，結(jié)果發(fā)現(xiàn)網(wǎng)頁404了，這是因?yàn)関ue路由的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項(xiàng)目打包部署到apache服務(wù)器的方法步驟的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目打包部署到apache內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在 Typescript 中使用可被復(fù)用的 Vue Mixin功能
這篇文章主要介紹了在 Typescript 中使用可被復(fù)用的 Vue Mixin功能，非常不錯，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
Vue封裝Swiper實(shí)現(xiàn)圖片輪播效果
圖片輪播是前端中經(jīng)常需要實(shí)現(xiàn)的一個功能。最近學(xué)習(xí)Vue.js，就針對Swiper進(jìn)行封裝，實(shí)現(xiàn)一個簡單的圖片輪播組件。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
在Web開發(fā)中,跨域問題是一大挑戰(zhàn),跨域是指網(wǎng)絡(luò)請求從一個域名發(fā)起,而請求的目標(biāo)資源位于另一個不同的域名下,通常使用Vue CLI的代理來解決跨域問題,而在生產(chǎn)環(huán)境中,可以通過后端配置CORS或使用Nginx反向代理,或者通過服務(wù)器中轉(zhuǎn)來解決跨域問題2023-10-10
Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
詳解vuex 中的 state 在組件中如何監(jiān)聽
本篇文章主要介紹了詳解vuex 中的 state 在組件中如何監(jiān)聽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
基于 flexible 的 Vue 組件：Toast -- 顯示框效果
這篇文章主要介紹了基于 flexible 的 Vue 組件：Toast -- 顯示框效果,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了Vuex 進(jìn)階之模塊化組織詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue中使用js-doc的相關(guān)知識，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2024-01-01
vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路詳解
最近領(lǐng)導(dǎo)提了一個新需求:仿照e簽寶,實(shí)現(xiàn)pdf電子簽章,本文給大家介紹vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue中van-picker的選項(xiàng)插槽的使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01