在前端项目部署过程中，静态资源的访问路径是否正确直接影响项目的正常运行。Vite作为新一代前端构建工具，提供了灵活的公共基础路径配置能力，让开发者可以根据部署环境调整资源的前缀路径。
什么是公共基础路径
公共基础路径指的是项目构建后所有静态资源请求的公共前缀，对应Vite配置中的base选项。当项目部署在域名的非根目录时，比如部署在https://ippipp.com/my-app/下，就需要将公共基础路径设置为/my-app/，否则构建后的资源路径会指向域名的根目录，导致加载失败。
基础配置方式
通过vite.config.js配置
最直接的方式是在Vite的核心配置文件中设置base属性，该配置会同时影响开发服务器和构建输出的路径。
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
// 公共基础路径，默认是 '/'
// 设置为空字符串或者 './' 可以实现相对路径引用
base: '/my-app/',
plugins: [vue()]
})
通过环境变量动态配置
如果需要根据不同的部署环境切换公共基础路径，可以结合环境变量来实现，避免每次部署都手动修改配置文件。
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 从环境变量中读取公共基础路径，默认值为 '/'
const basePath = process.env.VITE_BASE_PATH || '/'
export default defineConfig({
base: basePath,
plugins: [vue()]
})
然后在项目根目录创建.env.production文件，写入对应的环境变量：
# .env.production VITE_BASE_PATH=/my-app/
不同场景的配置示例
| 部署场景 | base配置值 | 说明 |
|---|---|---|
| 部署到域名根目录 | / | 默认值，所有资源从根路径请求 |
| 部署到子目录my-app | /my-app/ | 资源请求会带上/my-app/前缀 |
| 需要相对路径引用资源 | '' 或者 './' | 资源路径会基于当前HTML文件的位置计算 |
| 部署到CDN指定路径 | https://cdn.ipipp.com/assets/ | 资源会直接请求该CDN地址 |
注意事项
- 如果设置为相对路径，开发服务器中的资源路径可能需要额外处理，建议生产环境使用绝对路径配置
- 当
base设置为''或者'./'时，构建输出的HTML中资源引用会使用相对路径，适合打包后直接打开HTML文件的场景 - 如果部署的服务器配置了URL重写规则，也可以将
base设置为/，通过服务器规则处理路径映射
验证配置是否生效
配置完成后，执行构建命令：
npm run build
构建完成后查看dist/index.html文件中的资源引用路径，如果配置正确，会看到类似下面的内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/my-app/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script type="module" crossorigin src="/my-app/assets/index-abc123.js"></script>
<link rel="stylesheet" href="/my-app/assets/index-def456.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
可以看到所有资源路径都带上了/my-app/前缀，说明配置已经生效。