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
相关文章推荐: