vue history模式下，部署到服務器出現空白頁情況

項目場景

　　vue搭建的項目，路由一直用的hash模式，所以url中都會帶有一個“#”號。
　　現在想要去掉“#”，於是使用history模式 { mode: 'history' }，代碼如下：

import Vue from 'vue'; import App from './App'; import routers from './router'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter({  mode: 'history', routes: routers }); /* eslint-disable no-new */
new Vue({ el: '#app', router, components: {App}, template: '<App/>' });

 問題：頁面空白

mode: 'history'，使用這個模式，在開發階段一切都是正常的，訪問地址是localhost:8888，以上沒什么錯誤，一切都好用。url里也沒有#了。可是打包之后，訪問項目會發現頁面一片空白的情況。不是404，不報錯，只是空白！！

解決辦法：

1. 很多項目都放在了服務器根目錄下面，訪問后的url就是：http://123.com，這是一種解決辦法
2. 假如我的項目沒有放在服務器根目錄下，放在了服務器的nice/app下，那么打開地址是：http://123.com/nice/app

那么這里問題就來了，我們配的路由中並沒有nice/app，所以無法找到路徑中的組件，所以也就無法渲染了。這就是導致空白的原因!

此時只需要修改router中的index.js，給路由中加一個base的屬性，值為 ‘/nice/app/’就可以了。代碼：

const router = new VueRouter({ mode: 'history',  base: '/nice/app/', routes: routers });

注意

　　 記住這個base，base值兩邊一定要有"/"，不要寫成“nice/app”、“/nice/app”或者“nice/app/”。

    　其次，這個文件夾是服務器放項目的文件夾，不是你本地項目的文件夾位置！！