宝塔面板 - VUE项目刷新404 - 解决方案

原因分析

1. Vue路由模式影响

   • Vue默认使用hash模式（URL含#），而history模式通过HTML5 API管理路由，URL更简洁。但history模式下，直接访问非根路径（如/about）时，服务器会尝试查找对应文件路径，因Vue是单页应用（SPA），实际不存在该文件，导致404错误。

2. Nginx未正确配置

   • 未设置伪静态规则或try_files指令，导致服务器无法将所有请求重定向至index.html，由前端处理路由。

3. 静态资源路径错误

   • 构建后的dist目录未正确部署到Nginx的root路径，或项目部署在子目录时未调整publicPath和路由base配置。

解决方案

方案一：配置Nginx伪静态规则

在宝塔面板的网站设置中，修改Nginx配置文件，添加以下规则：

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

或更复杂的路由处理（适用于嵌套路由）：

location / {
    try_files $uri $uri/ @router;
    index index.html;
}
location @router {
    rewrite ^.*$ /index.html last;
}

操作步骤：

1. 进入宝塔面板 → 网站 → 设置 → 配置文件/伪静态
2. 粘贴上述代码并保存，重启Nginx服务。

方案二：切换Vue路由为hash模式

在Vue项目的路由配置文件（router/index.js）中，将模式改为hash：

router = new VueRouter({
    mode: 'hash', // 替换为hash模式
    routes: [...]
});

缺点：URL会包含#符号，影响美观 。

方案三：调整Vue项目配置（子目录部署）

若项目部署在子目录（如/app/），需同步修改：

1. Vue配置（vue.config.js）：

   module.exports = {
       publicPath: '/app/'
   };

2. 路由配置（router.js）：

   const router = new VueRouter({
       mode: 'history',
       base: '/app/',
       routes: [...]
   });

3. Nginx配置：确保root路径指向子目录。

方案四：检查静态资源路径与缓存

• 路径验证：确认dist文件夹已上传至Nginx的root目录，并在配置中正确指定（如root /www/wwwroot/project/dist;）。

• 缓存问题：若静态资源（JS/CSS）加载失败，可尝试注释Nginx中针对静态资源的过期缓存配置，如：

  # 注释以下配置（可能导致资源缓存失效）
  # location ~* \.(js|css|png)$ { ... }
  ``` [34](@ref) [36](@ref)。

注意事项

1. 重启Nginx服务

   每次修改配置后需执行sudo service nginx reload或通过宝塔面板重启。

2. 日志排查

   若问题未解决，查看Nginx错误日志（/var/log/nginx/error.log）定位具体错误。

3. Apache服务器方案

   若使用Apache，需配置.htaccess文件实现路由重定向。