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