apache和nginx下vue页面刷新404的解决方案

问题描述

记录一个新手很容易遇见的问题，vue的项目，在打包前本地cli模式运行没有任何问题，但是打包完在apache或者nginx中配置了域名后，项目会出现刷新后404的奇怪问题

原因

vue-router的mode使用了history模式，默认应该是hash模式。

一般都会因为hash模式的url不够美观，都用的history模式，而问题是由于history模式引起的。

history模式下的url并不是真实存在的，所以刷新后会找不到。

当你打包了项目后，一般默认会生成一个dist文件夹，文件夹下有且只有一个index.html文件。

并且vue是单页应用，因此我们可以认为所有的url路径其实都应该指向index.html的，至于路径vue会用独有的路由解析方式把他解析到对应的js文件，然后js把文件中的html模块渲染到index,html中，实现页面的展示，所以不要被路径所迷惑，

你可以把url路径理解为vue匹配页面所需要的参数，但是这个url路径如果你直接访问或者刷新，不管是apache还是nginx都无法去匹配到这个url路径，因为它不存在，所以我们此时就要在apache或者nginx配置一下伪静态，让每个url路径都指向index.html就可以了。

伪静态配置

apache伪静态配置

<IfModule mod_rewrite.c>
 
RewriteEngine On
 
RewriteBase /
 
RewriteRule ^index\.html$ - [L]
 
RewriteCond %{REQUEST_FILENAME} !-f
 
RewriteCond %{REQUEST_FILENAME} !-d
 
RewriteRule . /index.html [L]
 
</IfModule>

nginx伪静态配置

location / {
             ......
 
             try_files $uri $uri/ /index.html;
        }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。