Vue项目服务器部署刷新页面404

Vue项目服务器部署刷新页面404

问题描述

• 在上线vue开发的前端网页部署在服务器上后，刷新页面显示404

原因

• 因为网页上显示的是静态绝对路径
• 而实际上服务器上是没有改路径的，多以导致刷新汇报错误

解决方法

1. 在Vue框架中解决404
   vue router mode 默认为hsas，这样的url中会带有#，如果改成mode:'history'就能去掉#号，也可以正常访问，但是再次率先你页面就会出现404

const router = new Router({
mode: 'history'
});

• 将url中的#去掉，让人很不爽

2. 修改nginx配置文件
   将以下代码放入nginx中

location / {
	……
	try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}　

保存并退出

../nginx -t -- 验证nginx配置文件是否正确
../nginx -s reload -- 重启nginx

如果采用宝塔面板进行部署，则修改nginx相关配置即可