nginx中解决无法访问vue路由问题
如果需要部署使用 vue 开发的项目,那么或多或少会遇到这个问题
就是在 vue 中你配置了很多动态路由,但是打包部署到 nginx 上后,在线上访问这些路由会访问不到
线上访问路由报错 404
原因
这是因为在没有对 nginx 进行配置的情况下,它默认是去访问当前路径的网页资源,也就是 html 文件,但是我们使用 vue 开发的项目是单页面文件,并不会根据对应的路由生成静态的网页资源,也就是 html 文件
通俗来讲就是,比如你配置了一个 login 的路由,当访问 /login 的时候,浏览器会寻找 login.html 文件,而 vue 搭建的网站是单页面只有一个 index.html 文件,所以就会报错 404 找不到对应的资源
解决方案
解决方式就是更改你的 nginx 配置项目的那个配置文件
在 server 模块下的 location 模块下添加 try_files $uri $uri/ /index.html;
指令
这样所有的请求都会指向 index.html 文件,就不会报错 404 了
1 | server { |
- 感谢您的赞赏。
赞赏名单
因为有你们的支持,我才体会到写文章的价值。
本文是原创文章,采用CC BY-NC-SA 4.0协议,完整转载请注明来自星凪
评论 ()