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服務器哦）

 

 

若有錯誤，請多指教，謝謝！