解决宝塔面板部署Vue项目出现404错误的完整指南

解决宝塔面板部署Vue项目出现404错误的完整指南

问题描述

很多开发者在将Vue项目部署到宝塔面板时，经常会遇到访问页面时出现404错误的情况。这个问题尤其常见于使用了Vue Router history模式的项目中。本文将详细分析问题原因并提供多种解决方案。

问题原因分析

1. 未正确配置Nginx/Apache

Vue项目（特别是使用Vue Router的history模式）需要服务器端进行特殊配置，否则直接访问路由路径时，服务器会尝试查找对应的物理文件，从而导致404错误。

2. 静态文件路径错误

打包后的Vue项目静态文件路径配置不正确，导致资源加载失败。

3. 未正确设置项目根目录

宝塔面板中网站根目录设置不正确，没有指向Vue项目的dist目录。

解决方案

方案一：Nginx服务器配置（推荐）

1. 登录宝塔面板，找到对应的网站，点击"设置"
2. 进入"配置文件"选项卡
3. 在server块中添加以下配置：

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

完整配置示例：

server {
    listen 80;
    server_name yo