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內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！