【問題描述】

1.vue router使用history模式，開發環境下執行正常，打包並部署到nginx顯示空白頁面

2.vue router使用history模式，開發環境下執行正常，打包並部署到nginx顯示404

3.vue router使用history模式，開發環境下執行正常，打包並部署到nginx正常訪問，但是重新整理後顯示500

【問題分析】

1.顯示空白頁面說明靜態資原始檔沒有找到，頁面無法渲染出來。

2.報錯404時，表示連index.html都沒有被命中。

3.輸入路徑訪問，頁面顯示正常，但是一旦重新整理便顯示500，說明nginx配置異常。

【資訊蒐集】

伺服器配置：

HTML5模式伺服器配置示例

腳手架配置：
VUE-CLI中publicpath配置

【問題解決】

由於nginx上部署了不止一個專案，本專案只能部署到子路徑上。根據蒐集到的資料修改專案中的配置：

1.修改router.js中路由配置。

const router = new VueRouter({
  mode: 'history',
  base: '/HackerAC/',
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  },
  routes
})

2.修改vue.config.js配置。開發環境下專案只需要架設在根目錄即可，只是在生產環境下才需要將專案架設在子路徑“/HackerAC/”上，因此publicPath應該配置為條件式的。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/HackerAC/' : '/',
  outputDir: 'dist/HackerAC',
}

3.打包後：

4.將HackerAC資料夾及其下的檔案放置到nginx的html目錄下：

5.修改nginx配置檔案：

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
   
    server {
        listen       8085;
        server_name  localhost;
        
        location ^~ /HackerAC {
            index  /HackerAC/index.html;
            try_files $uri $uri/ /HackerAC/index.html;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
 

6.啟動nginx後,瀏覽器訪問：http://localhost:8085/HackerAC/ 即可。

【寫在最後】

1.與其懷著白拿的心思全網查詢各種部落格，翻閱著大量彼此抄襲的文章，還不如靜下心來看看官方文件。

2.良好的專業素質和崇高的職業素養是任何一個技術從業者最耀眼的精神品質。

3.觸類旁通，學習和成長從照葫蘆畫瓢開始。