Vue2部署后路由跳转出现404问题求助

核心原因 #

当使用Vue Router的history模式时，直接访问路由路径（比如/AddPosts）会触发服务器去查找对应路径的物理文件，但单页应用（SPA）只有index.html一个入口文件，服务器找不到匹配的文件就会返回404。Firebase的“单页应用”模式自动配置了请求重写规则，而普通FTP托管需要手动设置。

解决方案 #

1. 配置Vue项目的publicPath #

在vue.config.js中设置与部署路径匹配的publicPath：如果部署在域名根目录，设为/；如果是子目录（比如https://xxx.com/my-project/），则设为对应子目录路径：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: ['vuetify'],
  publicPath: '/' // 根据实际部署路径调整
});

2. 配置服务器重写规则 #

根据托管服务商的服务器类型，添加对应配置文件，让所有不存在的文件/目录请求都转发到index.html：

Apache服务器

在FTP上传后的项目根目录创建.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>

Nginx服务器

在站点的server配置块中添加：

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

CPanel托管

通过CPanel后台设置404页面跳转：

• 进入CPanel的「错误页面」功能
• 选择404错误页面，设置跳转目标为/index.html

静态托管平台（支持FTP上传的类型）

在项目根目录创建_redirects文件，写入：

/* /index.html 200

3. 验证操作 #

• 重新执行npm run build，将dist文件夹内的所有文件重新上传到FTP服务器
• 直接访问路由路径（比如/AddPosts），确认页面是否正常加载
• 若仍有问题，检查服务器是否启用了URL重写模块（比如Apache的mod_rewrite）

额外注意 #

• router/index.js中的base: process.env.BASE_URL会自动读取publicPath的值，无需手动修改
• 如果部署在子目录，务必同步修改publicPath和服务器重写规则中的路径（比如Apache的RewriteBase要设为子目录路径）

内容的提问来源于stack exchange，提问作者aTHEM