关于vue项目部署后刷新网页报404错误解决

针对题目“关于vue项目部署后刷新网页报404错误解决”的问题，我将给出完整攻略，并给出两个示例说明。

问题背景

在vue项目部署后，当在浏览器上进行刷新时，会出现404 Not Found错误，这是因为部署后的静态文件资源没有被正确地映射到服务器的URL路径上。

解决方法

部署vue项目后，需要在服务器端配置URL路径的映射规则，将浏览器请求的URL路径指向对应的静态文件资源。

方案1：使用nginx配置

如果你使用的是nginx服务器，可以通过在nginx.conf文件中添加如下配置来解决该问题：

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

这段配置规定了URL路径的请求如果无法找到对应的静态文件，就会重定向到根目录下的index.html文件，从而解决404问题。

方案2：使用Apache配置

如果你使用的是Apache服务器，可以通过在.htaccess文件中添加如下配置来解决该问题：

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

这个.htaccess配置文件规定了URL路径的请求如果无法找到对应的静态文件，就会重定向到根目录下的index.html文件，从而解决404问题。

示例说明

假设你的vue项目是在/home/vagrant/my-project目录下，你使用的是nginx服务器。

示例1：在nginx.conf文件中添加配置

在服务器上运行如下命令打开nginx.conf文件：

sudo nano /etc/nginx/nginx.conf

在http块中，加入如下配置：

server {
  listen       80;
  server_name  localhost;

  location / {
    root /home/vagrant/my-project/dist; # 指定根目录
    try_files $uri $uri/ /index.html; # 追加这行配置
  }
}

重启nginx服务：

sudo systemctl restart nginx

示例2：在.htaccess文件中添加配置

在my-project/dist目录下新建一个.htaccess文件，并加入如下配置：

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

保存文件，并上传到服务器上的my-project/dist目录下。