沈阳网站开发培训多少钱,邯郸一堆网络科技,太原要做网站的公司,织梦网站如何做地区分站问题描述#xff1a;
最近在开发cms的时候使用Vue.js框架#xff0c;利用vue-route结合webpack编写了一个单页路由项目#xff0c;自己在服务器端配置nginx。部署完成后#xff0c;访问没问题#xff0c;从页面中点击跳转也没问题#xff0c;但是只要点击刷新或通过浏览器…问题描述
最近在开发cms的时候使用Vue.js框架利用vue-route结合webpack编写了一个单页路由项目自己在服务器端配置nginx。部署完成后访问没问题从页面中点击跳转也没问题但是只要点击刷新或通过浏览器地址栏回车就会出现404现象在本地开发中是没有这个问题的调试的时候一切都是正常的
在服务器上 如直接访问地址
http://10.***.**.116:8081/home/application/list
1
便会出现404
问题原因
刷新页面时访问的资源在服务端找不到因为vue-router设置的路径不是真实存在的路径。
如上的404现象是因为在nginx配置的根目录/html/dist下面压根没有/home/application/list这个真实资源存在这些访问资源都是在js里渲染的。
在这里因为我使用的是vue-router的history模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL于是当 URL 改变时页面不会重新加载。
因为我不想要很丑的 hash就是使用路由的 history 模式这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router new VueRouter({mode: history,routes: [...]
})
1234
当使用 history 模式时URL 就像正常的 url例如 http://yoursite.com/user/id也好看
不过这种模式要玩好还需要后台配置支持。因为我们的应用是个单页客户端应用如果后台没有正确的配置当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404便是出现了以上提及到的问题。
所以呢你要在服务端增加一个覆盖所有情况的候选资源如果 URL 匹配不到任何静态资源则应该返回同一个 index.html 页面这个页面就是你 app 依赖的页面。
问题解决
后端配置例子
Apache
IfModule mod_rewrite.cRewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]
/IfModule
12345678
nginx
location / {try_files $uri $uri/ /index.html;
}
123
Node.js (Express)
https://github.com/bripkens/connect-history-api-fallback
1
注意
给个警告因为这么做以后你的服务器就不再返回 404 错误页面因为对于所有路径都会返回 index.html 文件。为了避免这种情况你应该在 Vue 应用里面覆盖所有的路由情况然后在给出一个 404 页面。
const router new VueRouter({mode: history,routes: [{ path: *, component: NotFoundComponent }]
})
123456
或者如果你是用 Node.js 作后台可以使用服务端的路由来匹配 URL当没有匹配到路由的时候返回 404从而实现 fallback。
