解决 VueCLI3 项目打包上线刷新 404 的问题

最近我创建的 极客返利平台 采用前后分离的方式。前端框架主要是 VueCLI 搭建的。

但是项目打包上线以后出现二级页面 404 的问题。例如 /about 页面。刷新就会出现 404 。或者直接复制二级页面重新打开同样也是 404。

最终经过一番搜索，解决方案如下：

Nginx

例如使用 Nginx 部署，须做如下修改即可

location /{

    error\_page  404  /index.html;

}

重启 Nginx 即可。

sudo service nginx restart

Apache

Apache 的方法我没有具体试过，这里给出网上解决方案

修改 Apache 配置

找到 #LoadModule rewrite\_module modules/mod\_rewrite.so 这一行 把 # 去掉 然后保存配置 重启服务

在项目目录 public 目录中创建 .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>

Apache 请参考如下链接：

https://blog.csdn.net/weixin_41791279/article/details/88374033

https://blog.csdn.net/ahzhaihui/article/details/82217604

OK，以上就是这次踩的坑，做个记录以免下次再遇到