Apache部署Vue网站刷新页面出现404 Not found

我的环境

Ubuntu18.04 + Apache + Vue3

问题描述

今天在把前端部署到服务器上时，碰到个奇怪的问题，明明在本地运行时能正常刷新的页面，到了Ubuntu服务器上后刷新后会跳出404 Page Not Found错误。排查后将解决方法锁定在Apache设置上。

问题解决

总结一下Apache部署网站404问题的解决方案。假如你用的是：

Linux系统

1. 首先进入到你存放网站的目录，Linux下一般在 /var/www 目录下，输入代码

cd /var/www/你的网站根目录

新建文件，将其命名为.htaccess，创建方式很多，我这里用vim演示

vim .htaccess

<IfModule mod_rewrite.c>
 Options +FollowSymlinks -Multiviews
 RewriteEngine On

 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]

esc + wq //保存退出

2. 接下来修改apache2.conf文件，默认位置一般在/etc/apache2/apache2.conf

vim /etc/apache2/apache2.conf

<Directory /var/www/>
  Options Indexes FollowSymLinks
  AllowOverride All
  Require all granted

在该文件内添加上述语句，最后文件局部类似下图：

esc + wq //保存退出

3. 接下来需要修改sites-available下你网站的配置文件，默认位置在/etc/apache2/sites-available目录下。比如我需要修改的就是下图用红框标记的文件。
   

vim /etc/apache2/sites-available/chen1998.conf

<VirtualHost *:80>
	ServerAdmin webmaster@localhost
	ServerName chen1998
	ServerAlias chen1998
	DocumentRoot /var/www/chen1998
	<Directory /var/www/chen1998>
	    Options Indexes FollowSymLinks
	    AllowOverride All
	    Require all granted
	
	ErrorLog ${APACHE_LOG_DIR}/error.log
	CustomLog ${APACHE_LOG_DIR}/access.log combined

网站部分的信息请自行修改成你自己的

4. 最后，分别运行两行代码，作用分别是开启重写模块并重启apache。

sudo a2enmod rewrite
service apache2 restart

刷新下网站，发现404问题消失。