面试题：Vue 项目部署到服务器后，报 404 错误的原因是什么？

在 Vue 项目部署到服务器后，出现 404 错误，通常是由于以下原因之一导致的：

1. 路由模式与服务器配置不匹配

问题描述：
Vue 路由默认使用 Hash 模式（URL 中有 #），而如果使用了 History 模式（URL 中没有 #），在刷新页面或直接访问子路由时，服务器会尝试根据 URL 路径查找对应的文件，但 Vue 是单页应用（SPA），只有一个 index.html 文件，因此服务器会返回 404。

解决方案：

配置服务器：
在服务器上配置将所有请求重定向到 index.html，确保 Vue 路由可以正确处理 URL。

Nginx：

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

Apache：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Node.js (Express)：

const history = require('connect-history-api-fallback');
const express = require('express');
const app = express();
app.use(history());
app.use(express.static('dist'));

回退到 Hash 模式：
如果无法修改服务器配置，可以将路由模式改为 Hash 模式

2. 静态资源路径配置错误

问题描述：
在 Vue 项目中，如果静态资源路径配置不正确，可能会导致资源加载失败，从而引发 404 错误。
解决方案：
- 在 vue.config.js 中配置 publicPath，确保静态资源路径正确：
```
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/your-sub-path/' : '/',
};
```
- 如果项目部署在子路径下（如 https://example.com/your-sub-path/），需要确保 publicPath 与部署路径一致。

3. 服务器文件路径错误

问题描述：
部署时，可能将构建后的文件放错了目录，或者服务器配置的根目录不正确，导致无法找到 index.html 或其他静态资源。
解决方案：
- 确保构建后的文件（通常是 dist 目录）被正确上传到服务器的目标目录。
- 检查服务器配置，确保根目录指向正确的文件夹。

4. 未正确构建项目

问题描述：
如果项目未正确构建（如未执行 npm run build），或者构建过程中出现错误，可能会导致部署后缺少必要的文件。
解决方案：
- 确保在部署前执行 npm run build 或 yarn build，生成 dist 目录。
- 检查构建日志，确保没有错误。

5. 服务器未正确配置 MIME 类型

问题描述：
如果服务器未正确配置 MIME 类型，可能会导致某些静态资源（如 CSS、JS 文件）无法加载，从而引发 404 错误。
解决方案：
- 确保服务器正确配置了静态资源的 MIME 类型。
- 例如，在 Nginx 中：
```
types {
  text/css css;
  application/javascript js;
}
```

6. 缓存问题

问题描述：
浏览器或服务器缓存可能导致旧版本的资源被加载，而新版本的资源未被正确加载。
解决方案：
- 清除浏览器缓存，或者强制刷新页面（Ctrl + F5）。
- 在服务器上配置缓存策略，确保静态资源更新后能够及时生效。

7. 子路径部署问题

问题描述：
如果项目部署在子路径下（如 https://example.com/your-sub-path/），但未正确配置 publicPath 和路由，可能会导致资源加载失败。

解决方案：

在 vue.config.js 中配置

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/your-sub-path/' : '/',
};

确保路由配置正确，避免硬编码路径。

8. 服务器权限问题

问题描述：
如果服务器上的文件权限配置不正确，可能会导致无法访问某些文件。
解决方案：
- 检查服务器上的文件权限，确保 Web 服务器用户有权限读取文件。

总结

Vue 项目部署后出现 404 错误的常见原因包括：

路由模式与服务器配置不匹配（History 模式需要服务器支持）。
静态资源路径配置错误。
服务器文件路径错误。
未正确构建项目。
服务器未正确配置 MIME 类型。
缓存问题。
子路径部署问题。
服务器权限问题。

THE END

Vue 进阶面试题