這篇文章主要講解了“vue-router history模式服務(wù)器端配置的方法”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue-router history模式服務(wù)器端配置的方法”吧！

創(chuàng)新新互聯(lián)，憑借十載的成都網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗，本著真心·誠心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計網(wǎng)站有上1000家案例。做網(wǎng)站建設(shè)，選創(chuàng)新互聯(lián)公司。

history路由

history模式是指使用HTML5的historyAPI實現(xiàn)客戶端路由的模式，它的典型表現(xiàn)就是去除了hash模式中url路徑中的#。在使用Vue-Router時開啟history模式非常容易，只需要在實例化路由時傳入mode:'history'配置項即可，但缺少服務(wù)端支持時，基于historyAPI的路由無法從url地址欄直接訪問指定頁面，這個很容易理解，因為url地址欄里輸入后回車相當(dāng)于發(fā)送了一次GET請求，那么不帶#的路由路徑就和普通的API接口是一樣的，既然服務(wù)端并沒有定義這樣的接口，那直接訪問時出現(xiàn)404頁面就很正常了。

官方示例

官方提供了很多處理這種場景的方式，以node.js版本的處理方案為例：

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

不難看出，它的處理思路就是所有請求都強制重定向到首頁，相當(dāng)于服務(wù)端屏蔽了訪問資源不存在的情況，而將路由的工作留給客戶端自己去處理，這樣啟用了history模式的前端路由在直接定位到子頁面時就不會報錯了。

vue-router history模式配置

vue-router的history模式需要將路由配置中的mode設(shè)置成history，同時還需要在服務(wù)器端進行相應(yīng)的配置。

與hash模式相比，在history模式下，頁面的url中會少一些如#這樣的符號：

hash：www.example.com/#/login

history：www.example.com/login

單頁應(yīng)用程序中，在history模式下瀏覽器會向服務(wù)器請求這個頁面，但是服務(wù)器端并不存在這個頁面于是就返回404。所以這個時候就需要給服務(wù)器端進行配置：除了靜態(tài)資源以外都需要返回單頁應(yīng)用的index.html。

服務(wù)器配置——nodejs

在nodejs服務(wù)器中需要引入connect-history-api-fallback這個模塊來處理history模式，并在使用處理靜態(tài)資源的中間件前使用這個模塊：

const path = require('path')
// 導(dǎo)入處理history模式的模塊
const history = require('connect-history-api-fallback')
const express = require('express')

const app = express()

// 注冊處理history模式的中間件
app.use(history())
// 處理靜態(tài)資源的中間件
app.use(express.static(path.join(__dirname, './web')))

app.listen(3000, () => {
    console.log('service started at port 3000')
})

服務(wù)器配置——nginx

先將打包后的文件放入html文件夾下，再打開conf文件夾下nginx.conf文件，修改如下配置：

http {
    # ...other config
    server {
        # ...other config
        location / {
            root html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
}

感謝各位的閱讀，以上就是“vue-router history模式服務(wù)器端配置的方法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue-router history模式服務(wù)器端配置的方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！