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

先不讨论是什么原因,直接说解决方法,分两种情况,一种是直接部署到根目录出现404,另一种是部署到二级以上目录出现404

如果是部署到根目录出现404问题,分以下情况

如果服务器是apache环境

  1. 确认apache的mod_rewrite模块是否安装并开启,
  2. 在根目录寻找.htaccess文件,如果不存在则创建该文件,
  3. 在.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>
(适用于vue项目部署在根目录情况)

如果服务器是nginx环境

在nginx的配置文件nginx.conf(Linux系统中该文件一般位于/etc/nginx/目录)中,找到

location / {
  #......
  #所要添加的配置代码
  try_files $uri $uri/ /index.html;
}
在上面位置添加代码(适用于vue项目部署在根目录情况)

如果是部署到二级或二级以上目录中

~~ 待测试后添加内容 ~~

出现这个404问题的原因
一种是因为vue router使用了history模式,由于history模式的链接url是伪静态,需要rewrite url规则来支持。
另一种是项目需要部署在二级或二级以上目录中,npm run build路径出现错误导致。

你可能感兴趣的:(Vue,全家桶)