將 Vue 項目部署到線上后出現(xiàn) 404 錯誤，通常是由于 路由配置、服務(wù)器設(shè)置或資源路徑問題 導(dǎo)致的。

以下是常見原因及解決方案：

1. 前端路由（history 模式）未配置服務(wù)器支持

問題原因

Vue 默認(rèn)使用 hash 模式（URL 帶 #），但若使用 history 模式（無 # 的 URL），刷新頁面時服務(wù)器會嘗試匹配該路徑，但實際不存在對應(yīng)的文件，導(dǎo)致 404。

示例：

訪問 https://example.com/user/123，服務(wù)器會查找 /user/123/index.html，但 Vue 是單頁應(yīng)用（SPA），所有路由應(yīng)由前端處理。

解決方案

方案 1：配置服務(wù)器重定向到 index.html

確保所有請求都返回 index.html，由 Vue Router 接管路由。

• Nginx 配置：

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

• Apache 配置（.htaccess）：

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

• Netlify/Vercel：

在部署設(shè)置中指定 rewrites 規(guī)則，指向 index.html。

方案 2：改用 hash 模式

在 Vue Router 中強制使用 hash 模式：

const router = new VueRouter({
  mode: 'hash', // 默認(rèn)是 'history'
  routes: [...]
});

2. 靜態(tài)資源路徑錯誤（JS/CSS 404）

問題原因

打包后的資源路徑錯誤，瀏覽器無法加載 JS/CSS 文件。

常見于項目部署在子目錄（如 https://example.com/subdir/），但靜態(tài)資源引用的是絕對路徑。

解決方案

修改 vue.config.js，設(shè)置正確的 publicPath：

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

• 如果部署在根目錄，用 publicPath: '/'；
• 如果部署在子目錄（如 /subdir/），用 publicPath: '/subdir/'。

檢查打包后的 index.html

確保引用的 JS/CSS 路徑正確，例如：

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

3. 服務(wù)器未正確配置 MIME 類型

問題原因

服務(wù)器未正確返回 .js、.css 等文件的 MIME 類型，導(dǎo)致瀏覽器拒絕加載。

解決方案

• Nginx 配置：

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

• Apache 配置：確保 .htaccess 包含：

AddType application/javascript js
AddType text/css css

4. 部署目錄結(jié)構(gòu)錯誤

問題原因

• 打包后的 dist 文件夾內(nèi)容未完整上傳到服務(wù)器。
• 服務(wù)器根目錄未指向 dist 文件夾。

解決方案

• 確保上傳的是 dist 內(nèi)的所有文件（而非 dist 文件夾本身）。
• 檢查服務(wù)器配置的根目錄是否正確：

server {
  root /path/to/your/dist;
  index index.html;
}

5. 瀏覽器緩存問題

問題原因

• 舊版本緩存導(dǎo)致加載異常。

解決方案

• 強制刷新頁面（Ctrl + F5 或 Cmd + Shift + R）。
• 在文件名中添加哈希（Vue CLI 默認(rèn)已配置）：

// vue.config.js
module.exports = {
  filenameHashing: true // 默認(rèn)開啟
};

總結(jié)排查步驟

• 檢查服務(wù)器路由配置（History 模式需重定向到 index.html）。
• 驗證靜態(tài)資源路徑（publicPath 是否正確）。
• 查看瀏覽器控制臺（Network 面板確認(rèn)哪些文件返回 404）。
• 檢查服務(wù)器日志（如 Nginx 的 error.log）。
• 清除緩存或使用無痕模式 測試。

如果問題仍未解決，可以提供具體的 部署環(huán)境（Nginx/Apache/Netlify 等） 和 錯誤日志，進(jìn)一步分析！

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論