開啟history模式：

如果不開啟的話，路由默認(rèn)是hash模式，開啟這個模式前端的工作也很簡單，如下：

mode: 'history' //在路由那里配置一下這個  如圖標(biāo)記1所示 

https://www.XXXXX.com/data/#/login // => 就替換成

https://www.XXXXX.com/data/login

先用hash模式部署項目到線上，然后再開啟histroy模式，由此引發(fā)的一些問題：
　　1.頁面直接訪問不到

如圖報錯
這時候需要服務(wù)器配合，將訪問不到的頁面全部指向項目目錄下的index.html
　　2.頁面可以訪問到，但是刷新之后所有的js、css、img找不到。頁面空白
　　

解決辦法：1.檢查控制臺network里靜態(tài)資源路徑是否正確
2.檢查之后確認(rèn)之后 如果路徑不對去項目里config文件夾下面index.js 
build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../dist/index.html'),
    env: require('./prod.env'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../../dist'),
    assetsSubDirectory: 'static',
　　// assetsPublicPath: './',  ／／把這里的配置改一下
　　assetsPublicPath: '/data/',  //這里就是對應(yīng)https://www.XXXXX.com/data/login 里的data絕對路徑 第一張圖標(biāo)記2就是跟這一個意思

3.請求帶上路由，導(dǎo)致請求失敗

正確的請求是：

http:www.xxx.com/api/接口 //api是我通過proxyTable轉(zhuǎn)發(fā)地址的代理名字

開啟histroy模式之后：

在二層的路由里面會出現(xiàn)這種情況：

路由是：http:www.xxx.com/a/b
http:www.xxx.com/api/a/接口 //這就導(dǎo)致了請求失敗，要把a也去掉才是正確的

解決方式是：

因為我用的是axios，所以可以在全局請求中設(shè)置一個baseURL，這個baseURL就是項目的網(wǎng)站地址（http:www.xxx.com）,然后二層的路由也會自動去掉前面的a和b。

以上就是關(guān)于history模式下vue頁面空白的相關(guān)問題以及解決辦法，覺得有幫助的歡迎轉(zhuǎn)載收藏關(guān)注作者（你們的關(guān)注是作者的動力）

總結(jié)

以上是生活随笔為你收集整理的vue histroy模式去除#页面刷新访问空白原因以及解决办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。