样式篇07|Vite CSS 调试进阶：你应该了解的 devSourcemap 配置

原创已于 2025-06-08 20:39:52 修改 · 120 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-08 19:49:04 首次发布

在使用 Vite 构建前端项目时，许多开发者可能遇到一个小烦恼：页面上的样式明明写在 Vue 文件中，却在浏览器里定位不到源文件。这是因为 Vite 对 CSS 的处理方式特殊，为了让调试体验更丝滑，Vite 提供了 devSourcemap 配置项。

什么是 Source Map？

source map（源映射）是构建工具中非常常见的概念。它的作用是：

将构建后的代码映射回原始源码，以便在浏览器中调试时能看到你真正写的代码。

这不仅适用于 JavaScript，也适用于 CSS。

Source Map的好处

在 Vite 项目中，即使我们使用 Vue 单文件组件（SFC），写下的样式也会被提取并内联到 **<head>** 标签中的 **<style>** 标签内。

示例：

<!-- App.vue -->
  <template>
  <div class="wrap">这是一个 vue3 的 demo，基于 Vite 构建</div>
  </template>

  <style scoped lang="less">
  .wrap {
  background: burlywood;
  border-radius: 5px;
  width: 400px;
  height: 80px;
  color: #fff;
  font-size: 24px;
  line-height: 80px;
}
</style>

我们打开浏览器，定位一下元素的样式

从浏览器的开发者工具中可以看到，Vite 会将 .vue 文件中的样式提取后，通过 <style> 标签注入到页面的 <head> 中。因此，当我们在浏览器中检查某个元素（如 .wrap）的样式时，定位到的并不是源文件，而是由 Vite 动态生成的 <style> 标签。

然而，在实际开发中，我们更希望能够直接定位到对应的源文件和具体行号，这样调试体验更好，也更容易维护样式逻辑。

此时，devSourcemap 配置就能发挥作用。

如何开启devSourcemap

为了解决上述问题，Vite 提供了 css.devSourcemap 选项，设置devSourcemap: true即可。

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  css: {
    // 预处理器配置项
    // preprocessorOptions: {// ..... },
    devSourcemap: true
  }
});

注：devSourcemap是css配置项的一个属性

然后，我们在打开浏览器定位下这个样式内容看看

很明显，这次我们直接定位到了App.vue的源码中，非常舒服，开发必备啊！

Vite中devSourcemap配置的最佳实践

首先，我们要明确的一点是，这个配置在生产环境（代码打包后）是无效的。我们配置此项，将代码进行部署，然后定位样式文件看看

可以发现，在生产模式，所有样式被放到了index[哈希值].css的文件内。因此，这个配置在生产模式是无效的。

那么，我们在vite中配置时，默认将其开启就行，反正生产模式也是不生效的。

当然，如果你想优雅的配置，可以环境启用

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig(({ command, mode, ssrBuild }) =>{
  plugins: [vue()],
  css: {
    // 开发模式为true，生产模式为flase
    devSourcemap:command === 'serve'
  },
});