Vue使用Nginx发布后刷新页面报404错误
问题现象:使用Vue-cli构建的项目,在本地调试运行都是OK的,打包之后使用Nginx发布后,指定跳转页面是ok的,但是刷新页面,reload页面时,报错404,找不到页面。Nginx端日志显示找不到资源路径。解决方案:第一种:首先,出问题的原因是:在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转。使用history模式的配置是:e...
·
问题现象:
使用Vue-cli构建的项目,在本地调试运行都是OK的,打包之后使用Nginx发布后,指定跳转页面是ok的,但是刷新页面,reload页面时,报错404,找不到页面。
Nginx端日志显示找不到资源路径。
解决方案:
第一种:
首先,出问题的原因是:
在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转。
使用history模式的配置是:
export default new Router({
mode: ‘history’,
})
那么,当我们 npm run build 完成并部署到服务器后,刷新某个路由下的页面,会出现 404 或者 502 错误。
这是因为刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径。
所以把mode改为hash模式就可以了。
第二种:
继续使用history模式,修改Nginx的配置,使所有的请求都定向到index.html页面
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
大家可以根据自己的情况使用对应的解决方案。
更多推荐
已为社区贡献4条内容
所有评论(0)