当前位置：首页 > article >正文

Vue 3 + Vite 项目配置访问地址到服务器某个文件夹的解决方案

article 2025/3/1 3:28:18

前言

在开发 Vue 3 + Vite 项目时，我们经常需要将项目部署到服务器的某个特定文件夹下。例如，将项目部署到 /my-folder/ 目录下，而不是服务器的根目录。这时，我们需要对 Vite 和 Vue Router 进行一些配置，以确保项目能够正确访问资源和处理路由。

本文将详细介绍如何配置 Vite 的 base 选项以及 Vue Router 的路由模式，解决部署到服务器子文件夹时可能遇到的问题。

问题描述

在 Vue 3 + Vite 项目中，默认情况下，Vite 会将资源路径指向根目录（/）。如果我们将项目部署到服务器的子文件夹（例如 /my-folder/），可能会出现以下问题：

资源加载失败：JS、CSS 等静态资源路径不正确，导致页面无法正常加载。
路由失效：如果使用了 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。