Vue項目打包部署到apache服務器的方法步驟
vue項目在開發環境下,讓項目運行起來,是通過npm run dev命令,原理是在本地搭建瞭一個express服務器。
但是在服務器上就不是這樣的,必須要通npm run build命令來對整個項目進行打包,打包後會在項目目錄下生成一個dist文件夾,內容如下:
然後就是把這些文件丟到服務器上的某個文件夾下,我這裡的文件夾名字是ibms
遇到的問題:
1. 直接去訪問http://www.xxx.com/ibms/,會發現網頁是白屏的,什麼都沒有,這就比較奇怪瞭,其實是因為資源加載的路徑有問題!
解決方法:
在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欄訪問某個子頁面,結果發現網頁404瞭,這是因為vue路由的mode是history模式。
解決方法:
把所有的請求全部轉發到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>
這個配置的作用就是把所有服務器上不存在請求全部轉發到index.html上去。(PS:記得要重啟apache服務器哦)
到此這篇關於Vue項目打包部署到apache服務器的方法步驟的文章就介紹到這瞭,更多相關Vue項目打包部署到apache內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Apache中偽靜態Rewrite的使用方法和URL重寫規則表達式講解
- Vue.js 前端項目在常見 Web 服務器上的部署配置過程
- Apache開啟並實現網站偽靜態化的方法
- vue-router history模式服務器端配置過程記錄
- PHP上傳目錄禁止執行php文件實例講解