Vue项目在上传宝塔后 除首页外页面刷新出现404_宝塔 apache vue刷新404

控制台打开网络

可以看到首次进来的时候是正常的

刷新一次后

请求网址发生了变化，并且出现404

这是因为在项目打包后，dist文件中只存在一个index网页，当我们从网址进去后通过路由跳转到达其他页面，关键在这里，当我们在其他页面执行刷新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况

解决方法：

一、改变服务器配置

Apache

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>
 
<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;
}

二、改变路由模式

在index.js文件中可以对路由模式进行修改，改为WebHashHistory后正常

import { createRouter, createWebHashHistory } from 'vue-router'
 
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

这是因为它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。

希望能为你带来帮助