vue histroy模式去除#頁面刷新訪問空白原因以及解決辦法

開啟history模式：

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

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

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

 

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

 

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

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

解決辦法：1.檢查控制台network里靜態資源路徑是否正確
2.檢查之后確認之后 如果路徑不對去項目里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/',  //這里就是對應https://www.XXXXX.com/data/login 里的data絕對路徑 第一張圖標記2就是跟這一個意思

 

3.請求帶上路由，導致請求失敗

正確的請求是：

http:www.xxx.com/api/接口 //api是我通過proxyTable轉發地址的代理名字

開啟histroy模式之后：

在二層的路由里面會出現這種情況：

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

解決方式是：

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

 

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