问题现象:
使用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;
    }

大家可以根据自己的情况使用对应的解决方案。

Vue

Logo

前往低代码交流专区

更多推荐