Vue 打包部署到服务器后,非主页刷新后出现404问题解决

开心把项目部署到服务上,从头到尾点了一遍,发现没有问题,以为就可以大功告成,没想到刷新页面时出现

 被破泼了一脸的凉水,更奇怪的事首页没有问题,只有其他页面出现,在调戏了很久的度娘后,才从坑里跳出来,以下是我自己跳坑的方法:

我用的是phpStudy执行环境,有点low,小项目啦,访问量也不多。

首先参考牛人的技术博客得到启示。

打开Apache的rewrite功能:

1)在windows环境下:
打开您的apache安装目录 “/apache/conf/”  下的  httpd.conf  文件,通过Ctrl+F查找到 LoadModule rewrite_module modules/mod_rewrite.so ,将前面的 ”#” 号删除即可
2)在linux环境下:
在编译 apache 的时候记得加上带  rewrite  模块。

2、让apache服务器支持.htaccess
在服务器或者虚拟主机的 <Directory> 配置段里,把你的 AllowOverride 配置设置成All,表示允许所有指令在  .htaccess  生效。

3、检查rewrite模块是否开启
当rewrite模块已经成功加载时,在phpinfo()里可以看到load的模块列表里有rewrite的名字。

更多rewrite知识访问技术牛人博客

在项目根目录下新建.htaccess文件,建议用vscode去创建,这样少一点揪心的事。如下图:

 

参考官方文档,htaccess内容如下:

1 <IfModule mod_rewrite.c>
2   RewriteEngine On
3   RewriteBase /
4   RewriteRule ^index.html$ - [L]
5   RewriteCond %{REQUEST_FILENAME} !-f
6   RewriteCond %{REQUEST_FILENAME} !-d
7   RewriteRule . /index.html [L]
8 </IfModule>

更多htaccess内容参考大神的技术博客

重启服务器,这样就可以啦。

原文地址:https://www.cnblogs.com/joyco773/p/11864405.html