1.路由模式:
hash模式
hash 模式使用 URL 的 hash 來模擬一個(gè)完整的 URL, 其顯示的網(wǎng)路路徑中會(huì)有 “#” 號(hào)
hash 雖然出現(xiàn) URL 中募寨,但不會(huì)被包含在 HTTP 請(qǐng)求中族展,對(duì)后端完全沒有影響,因此改變 hash 后刷新, 也不會(huì)有問題
hash 模式示例: http://localhost:8080/#/home http://localhost:8080/#/user
history模式
history 模式美化后的hash模式拔鹰,路徑中不包含“#”仪缸。依賴于 Html5 的 history api
由于改變了地址, 刷新時(shí)會(huì)按照修改后的地址請(qǐng)求后端, 需要后端配置處理, 將地址訪問做映射, 否則會(huì) 404
history 模式示例: http://localhost:8080/home http://localhost:8080/user
Vue 項(xiàng)目修改路由模式:
修改路由模式從 hash 轉(zhuǎn)變?yōu)閔istory模式列肢,只需要將路由的mode類型改成history即可恰画,一般在在src/router/index.js
中
// 創(chuàng)建路由實(shí)例
const createRouter = () => new Router({
mode: 'history',//路由模式修改為history
scrollBehavior: () => ({ y: 0 }),
// 指定路由規(guī)則
routes: [
...constantRoutes // 靜態(tài)路由規(guī)則數(shù)組
]
})
配置好之后,我們?cè)L問路徑不再需要加 # 號(hào)同樣運(yùn)行正常瓷马,這是因?yàn)?webpack 默認(rèn)配好了對(duì)于 history 模式的處理拴还,實(shí)際上線其實(shí)是有問題的,需要我們?cè)黾宇~外的配置
注意
:history 模式下首次打開可以正常訪問 一旦刷新就會(huì)出現(xiàn)找不到資源的情況 這是因?yàn)椴患?# 號(hào)欧聘,服務(wù)器會(huì)當(dāng)成一般的資源進(jìn)行處理片林,發(fā)現(xiàn)找不到資源路徑就會(huì)報(bào)錯(cuò)
2.解決history
使用 koa 框架部署項(xiàng)目
a.建立 web 服務(wù)文件夾 myServer
b.在該文件夾下,初始化 npm:npm init -y
c.安裝服務(wù)端框架 koa (也可以采用 express 或者 egg ):npm i koa koa-static
d.myServer 中新建 public 目錄,并拷貝打包好的 dist 目錄內(nèi)容费封,到myServer/public
下
e.在根目錄下創(chuàng)建 app.js焕妙,代碼如下:
const Koa = require('koa')
const serve = require('koa-static')
const app = new Koa()
// 將public下的代碼靜態(tài)化
app.use(serve(__dirname + "/public"))
app.listen(9999, () => {
console.log('項(xiàng)目啟動(dòng): 9999端口')
})
此時(shí),已使用koa完成了項(xiàng)目的部署弓摘,接下來就是解決history問題:
安裝 koa中間件:
# 專門處理history模式的中間件
npm install koa2-connect-history-api-fallback
注冊(cè)中間件:
const Koa = require('koa')
const serve = require('koa-static')
+ const { historyApiFallback } = require('koa2-connect-history-api-fallback')
const app = new Koa();
// 這句話 的意思是除接口之外所有的請(qǐng)求都發(fā)送給了 index.html
+ app.use(historyApiFallback({
// 這里的whiteList是 白名單的意思
+ whiteList: ['/api']
}))
// 將public下的代碼靜態(tài)化
app.use(serve(__dirname + "/public"))
app.listen(9999, () => {
console.log('項(xiàng)目啟動(dòng): 9999端口')
})
此時(shí)解決了刷新 404 的問題 ~~~
3.解決跨域問題
安裝跨域代理中間件:
npm install koa2-proxy-middleware
配置跨域代理:
const Koa = require('koa')
const serve = require('koa-static');
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const proxy = require('koa2-proxy-middleware')
const app = new Koa();
// 添加代理轉(zhuǎn)發(fā)規(guī)則
app.use(proxy({
targets: {
// 匹配/api開頭后面任意字符正則
'/api/(.*)': {
target: 'http://xxx.xxx.com', //后端服務(wù)器地址
changeOrigin: true
}
}
}))
// 這句話 的意思是除接口之外所有的請(qǐng)求都發(fā)送給了 index.html
app.use(historyApiFallback({
whiteList: ['/api']
})); // 這里的whiteList是 白名單的意思
app.use(serve(__dirname + "/public")); //將public下的代碼靜態(tài)化
app.listen(9999, () => {
console.log('項(xiàng)目啟動(dòng): 9999端口')
})
注意
:此時(shí)前端訪問接口的baseUrl應(yīng)該為:'/api',接口需訪問本地服務(wù)器焚鹊。
此時(shí)即完美解決了接口的跨域問題哦~~~