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

前言

在开发 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 项目部署中的路径问题。如果有任何疑问，欢迎在评论区留言讨论！