考察点分析

该题目主要考查候选人以下能力维度：

  1. 构建工具配置理解：对Vite核心配置项的掌握程度
  2. 部署场景适配能力：处理CDN加速、子目录部署等生产环境需求的实际经验
  3. 路径解析机制：理解静态资源路径生成逻辑与HTML基础路径的关系

具体技术评估点包括：

  • base配置对资源路径的改写规则
  • CDN部署时的路径拼接策略
  • 子目录部署时与路由系统的联动配置
  • 开发环境与生产环境的路径差异处理
  • 与public目录静态资源的协同工作机制

技术解析

关键知识点

  1. 基础路径计算逻辑
  2. 资源路径解析优先级
  3. 路由系统联动配置

原理剖析

Vite的base配置项用于定义应用部署的基础路径，其核心作用类似于webpack的publicPath。当资源路径包含以下情况时，路径会被自动改写：

  • 通过import导入的模块
  • CSS中的url()引用
  • public目录下的静态资源
  • 通过new URL()构造的绝对路径

部署时路径计算遵循公式：最终路径 = base + 相对路径。例如配置base: '/sub/'时，src/assets/logo.png会被解析为/sub/assets/logo.png。

常见误区

  1. 混淆开发环境与生产环境的路径处理（开发环境默认不应用base）
  2. 未同步配置Vue Router的base选项导致路由失效
  3. 在动态拼接路径时忘记手动添加base前缀

问题解答

Vite的base配置项用于定义项目部署的基础路径，主要解决以下场景：

  1. 子目录部署：当应用部署在https://domain.com/sub-path/时，需设置base: '/sub-path/'，此时所有资源路径自动添加该前缀
  2. CDN加速：部署至https://cdn.domain.com/时配置base: 'https://cdn.domain.com/project/'，确保资源从CDN加载

示例配置：

  // vite.config.js
export default defineConfig({
  base: process.env.NODE_ENV === 'production' 
    ? '/sub-path/' 
    : '/'
})

路由同步配置（以Vue Router为例）：

  const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 自动读取Vite的base配置
  routes: [...]
})

解决方案

CDN部署配置示例 

  // vite.config.js
export default defineConfig({
  base: process.env.CDN_URL 
    ? `${process.env.CDN_URL}/` 
    : '/',
  build: {
    assetsDir: 'static' // 规范资源目录结构
  }
})

关键优化：

  • 通过环境变量区分CDN地址与本地路径
  • 使用assetsDir集中管理资源，提升CDN缓存命中率

子目录部署适配 

  <!-- 构建后的index.html -->
<script type="module" src="/sub-path/assets/index-5e87c.js"></script>
<!-- 未设置base时的默认路径 -->
<script type="module" src="/assets/index-5e87c.js"></script>

扩展建议

  1. 动态环境适配：通过import.meta.env.BASE_URL获取运行时base值
  2. SSR场景：配合@vitejs/plugin-html处理模板路径
  3. 版本控制：在base路径中加入构建哈希值解决缓存失效问题

深度追问

如何验证base配置是否生效？

通过vite preview命令本地预览构建产物，观察资源加载路径

部署到二级目录后页面白屏可能原因？

路由未配置base或HTML中资源路径未正确添加前缀

动态加载的图片资源为何要使用new URL？

确保Vite的路径处理插件能正确捕获并重写资源路径

Edit this page

Last updated 06 Mar 2025, 13:07 +0800 . history