前言

在開發 Vue 3 + Vite 項目時，我們經常需要將項目部署到服務器的某個特定文件夾下。例如，將項目部署到?/my-folder/?目錄下，而不是服務器的根目錄。這時，我們需要對 Vite 和 Vue Router 進行一些配置，以確保項目能夠正確訪問資源和處理路由。

本文將詳細介紹如何配置 Vite 的?base?選項以及 Vue Router 的路由模式，解決部署到服務器子文件夾時可能遇到的問題。

問題描述

在 Vue 3 + Vite 項目中，默認情況下，Vite 會將資源路徑指向根目錄（/）。如果我們將項目部署到服務器的子文件夾（例如?/my-folder/），可能會出現以下問題：

1. 資源加載失敗：JS、CSS 等靜態資源路徑不正確，導致頁面無法正常加載。

2. 路由失效：如果使用了 Vue Router 的?history?模式，路由可能無法正確匹配。

為了解決這些問題，我們需要對 Vite 和 Vue Router 進行配置。

解決方案

1. 配置 Vite 的?base?選項

Vite 提供了一個?base?配置項，用于指定項目的公共基礎路徑。我們可以通過修改?vite.config.js?文件來設置?base。

示例：將?base?配置為?/my-folder/

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],base: '/my-folder/' // 設置基礎路徑
});

示例：將?base?配置為?./

如果你希望使用相對路徑（例如直接打開?index.html?文件），可以將?base?配置為?./：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],base: './' // 使用相對路徑
});

2. 配置 Vue Router

如果你在項目中使用了 Vue Router，還需要根據?base?的配置調整路由的設置。

情況 1：使用?hash?模式

hash?模式（URL 中有?#）不依賴于服務器的路徑配置，因此即使?base?是?./?或?/my-folder/，路由也能正常工作。

import { createRouter, createWebHashHistory } from 'vue-router';const router = createRouter({history: createWebHashHistory(), // 使用 hash 模式routes: [// 路由配置]
});export default router;

情況 2：使用?history?模式

history?模式（URL 中沒有?#）依賴于服務器的路徑配置。如果?base?是?/my-folder/，則需要將?createWebHistory?的?base?參數設置為?/my-folder/。

import { createRouter, createWebHistory } from 'vue-router';const router = createRouter({history: createWebHistory('/my-folder/'), // 與 Vite 的 base 保持一致routes: [// 路由配置]
});export default router;

如果?base?是?./，則需要將?createWebHistory?的?base?參數設置為?./：

import { createRouter, createWebHistory } from 'vue-router';const router = createRouter({history: createWebHistory('./'), // 與 Vite 的 base 保持一致routes: [// 路由配置]
});export default router;

3. 部署到服務器

完成配置后，運行以下命令構建項目：

npm run build

構建后的文件會生成在?dist?目錄下。將?dist?目錄中的內容上傳到服務器的目標文件夾（例如?/my-folder/）。

服務器配置示例（Nginx）

如果你使用 Nginx 作為服務器，可以按照以下配置：

server {listen 80;server_name your-domain.com;location /my-folder/ {alias /path/to/your/my-folder/;try_files $uri $uri/ /my-folder/index.html;}
}

4. 注意事項

• 如果?base?配置為?./，并且使用?history?模式，直接通過文件協議（file://）打開?index.html?可能會導致路由失效。此時建議使用?hash?模式。

• 確保服務器的配置正確，尤其是使用?history?模式時，需要配置服務器支持 fallback 到?index.html。

總結

通過以上配置，我們可以輕松地將 Vue 3 + Vite 項目部署到服務器的某個文件夾下。關鍵點如下：

1. Vite 配置：通過?base?選項設置項目的基礎路徑。

2. Vue Router 配置：根據?base?的配置調整路由模式（hash?或?history）。

3. 服務器配置：確保服務器正確指向目標文件夾，并支持 fallback 到?index.html。

希望本文能幫助你解決 Vue 3 + Vite 項目部署中的路徑問題。如果有任何疑問，歡迎在評論區留言討論！

?

?

?

?

?

?

?

?