将 Vue 项目部署到线上后出现 404 错误，通常是由于 路由配置、服务器设置或资源路径问题 导致的。
以下是常见原因及解决方案：

1. 前端路由（history 模式）未配置服务器支持






问题原因

Vue 默认使用 hash 模式（URL 带

1. #

复制代码

），但若使用 history 模式（无

1. #

复制代码

的 URL），刷新页面时服务器会尝试匹配该路径，但实际不存在对应的文件，导致 404。
示例：
访问

1. https://example.com/user/123

复制代码

，服务器会查找

1. /user/123/index.html

复制代码

，但 Vue 是单页应用（SPA），所有路由应由前端处理。





解决方案

方案 1：配置服务器重定向到

1. index.html

复制代码

确保所有请求都返回

1. index.html

复制代码

，由 Vue Router 接管路由。

• Nginx 配置：
  

1. location / {
   
2.   try_files $uri $uri/ /index.html;
   
3. }

复制代码

• Apache 配置（
  1. .htaccess

  复制代码
  ）：
  

1. RewriteEngine On
   
2. RewriteBase /
   
3. RewriteRule ^index\.html$ - [L]
   
4. RewriteCond %{REQUEST_FILENAME} !-f
   
5. RewriteCond %{REQUEST_FILENAME} !-d
   
6. RewriteRule . /index.html [L]

复制代码

• Netlify/Vercel：
  

在部署设置中指定

1. rewrites

复制代码

规则，指向

1. index.html

复制代码

。
方案 2：改用 hash 模式
在 Vue Router 中强制使用 hash 模式：

1. const router = new VueRouter({
   
2.   mode: 'hash', // 默认是 'history'
   
3.   routes: [...]
   
4. });

复制代码

2. 静态资源路径错误（JS/CSS 404）

问题原因

打包后的资源路径错误，浏览器无法加载 JS/CSS 文件。
常见于项目部署在子目录（如

1. https://example.com/subdir/

复制代码

），但静态资源引用的是绝对路径。
解决方案

修改

1. vue.config.js

复制代码

，设置正确的

1. publicPath

复制代码

：

1. module.exports = {
   
2.   publicPath: process.env.NODE_ENV === 'production' ? '/your-subdir/' : '/'
   
3. };

复制代码

• 如果部署在根目录，用
  1. publicPath: '/'

  复制代码
  ；
  
• 如果部署在子目录（如
  1. /subdir/

  复制代码
  ），用
  1. publicPath: '/subdir/'

  复制代码
  。
  

检查打包后的

1. index.html

复制代码

确保引用的 JS/CSS 路径正确，例如：

1. <script src="/subdir/js/app.123456.js"></script>

复制代码

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

问题原因

服务器未正确返回

1. .js

复制代码

、

1. .css

复制代码

等文件的 MIME 类型，导致浏览器拒绝加载。
解决方案

• Nginx 配置：
  

1. location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
   
2.   expires 1y;
   
3.   add_header Cache-Control "public";
   
4.   try_files $uri =404;
   
5. }

复制代码

• Apache 配置：确保
  1. .htaccess

  复制代码
  包含：
  

1. AddType application/javascript js
   
2. AddType text/css css

复制代码

4. 部署目录结构错误

问题原因

• 打包后的
  1. dist

  复制代码
  文件夹内容未完整上传到服务器。
  
• 服务器根目录未指向
  1. dist

  复制代码
  文件夹。
  

解决方案

• 确保上传的是
  1. dist

  复制代码
  内的所有文件（而非
  1. dist

  复制代码
  文件夹本身）。
  
• 检查服务器配置的根目录是否正确：
  

1. server {
   
2.   root /path/to/your/dist;
   
3.   index index.html;
   
4. }

复制代码

5. 浏览器缓存问题

问题原因

• 旧版本缓存导致加载异常。
  

解决方案

• 强制刷新页面（
  1. Ctrl + F5

  复制代码
  或
  1. Cmd + Shift + R

  复制代码
  ）。
  
• 在文件名中添加哈希（Vue CLI 默认已配置）：
  

1. // vue.config.js
   
2. module.exports = {
   
3.   filenameHashing: true // 默认开启
   
4. };

复制代码

总结排查步骤

• 检查服务器路由配置（History 模式需重定向到
  1. index.html

  复制代码
  ）。
  
• 验证静态资源路径（
  1. publicPath

  复制代码
  是否正确）。
  
• 查看浏览器控制台（Network 面板确认哪些文件返回 404）。
  
• 检查服务器日志（如 Nginx 的
  1. error.log

  复制代码
  ）。
  
• 清除缓存或使用无痕模式 测试。
  

如果问题仍未解决，可以提供具体的 部署环境（Nginx/Apache/Netlify 等） 和 错误日志，进一步分析！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/339807k0s.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！