devSourcemap
如果我们采用诸如webpack或vite的构建工具开发项目，一定对sourcemap这个单词比较熟悉。sourcemap即
源代码映射，开启后，即使在开发环境也可以映射出源代码的位置。
在vite项目中，css也有与之类似的属性devSourcemap。
vite对css内容的特殊处理
官网对devSourcemap的解释非常简单：
| 配置名 | 属性值 | 释义 |
|---|---|---|
| devSourcemap | boolean | 默认false |
我们通过几个简单示例来看看这个属性值的含义。
我们在一个基于vite的vue项目中，随便写一点简单样式，不做任何配置
// 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将app.vue的内样式内容进行了处理，以style标签的形式全局注入到了html里。因此，我们通过浏览器定位div元素的.wrap样式时，指向的是head标签内的style标签。
然而，开发过程中，我们更希望能通过类名直接定位到是哪个文件内的样式，这样更利于我们调试。
这时，devSourcemap属性就派上用场了。
devSourcemap的用途
我们在vite.congfig.js内配置devSourcemap为true
注：devSourcemap是css配置项的一个属性
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
css: {
// 预处理器配置项
// preprocessorOptions: {// ..... },
devSourcemap:true
},
});
然后，我们在打开浏览器定位下这个样式内容看看
很明显，这次我们直接定位到了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'
},
});
可能有些同学觉得这里的配置方法比较奇怪，没关系，参考这篇文章：
https://juejin.cn/post/7172009616967942175
相关文章推荐：