Vue路由history模式解决404问题的几种方法
问题背景：
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成 如下：http://localhost:8080/bank/page/count 这样的了；
不过history的这种模式需要后台配置支持。比如：当我们进行项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404
怎么解决呢？我们现在可以把所有请求都转发到 http://localhost:8080/bank/page/index.html上就可以了。
解决方案：
对于VUE的router[mode: history]模式在开发的时候，一般都不出问题。是因为开发时用的服务器为node，Dev环境中自然已配置好了。
但对于放到nginx下运行的时候，自然还会有其他注意的地方。总结如下：
在nginx里配置了以下配置后， 可能首页没有问题，但链接其他会出现（404）
location / {
root D:\Test\exprice\dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
location ^~/api/ {
proxy_pass http://39.105.109.245:8080/;
}
为了解决404，需要通过以下两种方式：
1、官网推荐
location / {
root D:\Test\exprice\dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
2、匹配errpr_page
location /{
root /data/nginx/html;
index index.html index.htm;
error_page 404 /index.html;
}
3、 （vue.js官方教程里提到的https://router.vuejs.org/zh-cn/essentials/history-mode.html）
server {
listen 8888;#默认端口是80，如果端口没被占用可以不用修改
server_name localhost;
root E:/vue/my_project/dist;#vue项目的打包后的dist
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html index.htm;
}
#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
#因此需要rewrite到index.html中，然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
#.......其他部分省略
}
绛旓細姣斿濡備笅缃戝潃锛氫娇鐢╤ash妯″紡鐨勮瘽锛岄偅涔堣闂彉鎴 http://localhost:8080/bank/page/count/#/ 杩欐牱鐨勮闂紝濡傛灉璺敱浣跨敤 history鐨勮瘽锛岄偅涔堣闂殑璺緞鍙樻垚 濡備笅锛歨ttp://localhost:8080/bank/page/count 杩欐牱鐨勪簡锛涗笉杩噃istory鐨勮繖绉嶆ā寮忛渶瑕佸悗鍙伴厤缃敮鎸併傛瘮濡傦細褰撴垜浠繘琛岄」鐩殑涓婚〉鐨勬椂鍊欙紝涓鍒囨甯革紝鍙互璁...
绛旓細鍘熷洜锛 鍥犱负涓鑸vue鑴氭墜鏋剁殑榛樿璺敱閰嶇疆鏃秇ash妯″紡锛屼负浜嗚В鍐崇洿鎺ユ墦寮鎵撳寘鏂囦欢椤甸潰绌虹櫧鐨勯棶棰橈紝浼氬湪config>index.js 涓嬶紝鎶奲uild鐨 assetsPublicPath:'/', 鏀规垚assetsPublicPath:'./';浣嗗彉鎴history璺敱妯″紡鏃讹紝灏辫鏀瑰洖鏉 瑙ｅ喅鏂规锛1. 璁剧疆 assetsPublicPath:'/',2. 锛堝彲鏃狅級devServer...
绛旓細const router = new VueRouter({ mode: 'history' routes: [.]})浣跨敤杩欑妯″紡涔嬪悗锛屽氨娌℃湁#浜嗭紝鑰屾槸鍙互鍍忎娇鐢ㄦ甯哥殑url杩涜璁块棶浜嗐 ?涓嶈繃杩欑妯″紡瑕佺帺濂斤紝杩橀渶瑕佸悗鍙伴厤缃敮鎸併傚洜涓烘垜浠殑搴旂敤鏄釜鍗曢〉瀹㈡埛绔簲鐢紝濡傛灉鍚庡彴娌℃湁姝ｇ‘鐨勯厤缃紝褰撶敤鎴峰湪娴忚鍣ㄧ洿鎺ヨ闂 http://oursite.com/user/id ...
绛旓細vue璺敱鐨勪袱绉妯″紡锛宧ash涓history 瀵逛簬Vue 杩欑被娓愯繘寮忓墠绔紑鍙戞鏋讹紝涓轰簡鏋勫缓SPA锛堝崟椤甸潰搴旂敤锛夛紝闇瑕佸紩鍏ュ墠绔矾鐢辩郴缁燂紝杩欎篃灏辨槸Vue-router瀛樺湪鐨勬剰涔夈傚墠绔矾鐢辩殑鏍稿績锛屽氨鍦ㄤ簬鈥斺斺 鏀瑰彉瑙嗗浘鐨勫悓鏃朵笉浼氬悜鍚庣鍙戝嚭璇锋眰銆 涓銆佷负浜嗚揪鍒拌繖涓洰鐨勶紝娴忚鍣ㄦ彁渚涗簡...
绛旓細mode: "history", 鎯冲綋骞存垜浣跨敤 Vue Cli 鏃讹紝鍒拌繖灏卞畬浜嬩簡... .鐒惰岋紝杩愭皵涓嶅ソ鐨勬垜浠彲鑳戒細閬囧埌 鎵句笉鍒癷ndex.html鐨勯敊璇紝鍥犱负鏈湴鐨剋ebpack-dev-server涔熻閰嶇疆锛屼笉瀛樺湪鐨勮祫婧愮粺涓杩斿洖index.html 鐒惰岋紝杩愭皵涓嶅ソ鐨勬垜浠彲鑳戒細閬囧埌 绐佺劧鍙戠幇椤甸潰鍔犺浇 index.js 鐨勬柟寮忔槸杩欐牱鐨 妯℃澘 index.html ...
绛旓細濡傛灉涓嶆兂瑕佸緢涓戠殑 hash锛屾垜浠彲浠ョ敤璺敱鐨 history 妯″紡锛岃繖绉嶆ā寮忓厖鍒嗗埄鐢 history.pushState API 鏉ュ畬鎴怳RL 璺宠浆鑰屾棤椤婚噸鏂板姞杞介〉闈 Vue-router 鍙﹀锛屾牴鎹 Mozilla Develop Network 鐨勪粙缁嶏紝璋冪敤 history.pushState() 鐩告瘮浜庣洿鎺ヤ慨鏀 hash锛屽瓨鍦ㄤ互涓嬩紭鍔:pushState() 璁剧疆鐨勬柊 URL 鍙互鏄笌褰撳墠 URL ...
绛旓細绉诲姩绔噰鐢╓ebView鍔犺浇Vue鍗曢〉搴旂敤鏃讹紝瑕侀噰鐢╤ash妯″紡 瑙ｉ噴锛氭垜浠悊鎯崇殑鎯呭喌鏄氳繃index.html杩涘叆椤甸潰锛屽悗缁殑鎿嶄綔閮界敱ajax瀹屾垚锛屼絾鏄鏋滈亣鍒扮敤鎴风洿鎺ュ湪鍦板潃鏍忎腑杈撳叆鐒跺悗鍥炶溅鎴栬呭己琛岄噸鏂板姞杞界瓑鎿嶄綔 閫氳繃涓婇潰渚嬪瓙锛屾垜浠彲浠ョ煡閬history妯″紡浼氬儚鏈嶅姟鍣ㄥ彂璧疯姹傦紝杩欐椂濡傛灉鏈嶅姟绔病鏈夊尮閰嶇殑璺敱澶勭悊锛屽垯鎶ラ敊锛涘鏋...
绛旓細璁╂墍鏈夊叆鍙ｉ兘鏀寔 history 妯″紡:1. 棣栧厛, 鎴戜滑鍦 build 鐩綍涓嬪缓绔嬩釜 setup-dev-server.js 鏂囦欢, 閲岄潰浠ｇ爜濡備笅:2. 淇敼 build/dev-server.js 鏂囦欢涓昏淇敼鏂囦欢涓璿ar app = express()鍒癿odule.exports = app.listen(port, function (err) {涔嬮棿鐨勪唬鐮3. npm run dev 寮濮嬫剦蹇殑鍐欎唬鐮佸惂 ...
绛旓細vue-router 榛樿 hash 妯″紡 鈥斺 浣跨敤 URL 鐨 hash 鏉ユā鎷熶竴涓畬鏁寸殑 URL锛屼簬鏄綋 URL 鏀瑰彉鏃讹紝椤甸潰涓嶄細閲嶆柊鍔犺浇銆傚鏋滀笉鎯宠寰堜笐鐨 hash锛屾垜浠彲浠ョ敤璺敱鐨 history 妯″紡 锛岃繖绉嶆ā寮忓厖鍒嗗埄鐢 history.pushState API 鏉ュ畬鎴 URL 璺宠浆鑰屾棤椤婚噸鏂板姞杞介〉闈傚綋浣犱娇鐢 history 妯″紡鏃讹紝URL 灏卞儚姝ｅ父...
绛旓細1銆乧onst router = new VueRouter({ mode: "history", base: test,}); 2銆vue.config涓 publicPath: test 3銆乶ginx锛歭ocation / { alias /root_path/ &#...
