devSourcemap
webpack이나 vite와 같은 구성 도구를 사용하여 프로젝트를 개발하는 경우 sourcemap 이라는 단어에 익숙 해야 합니다 . sourcemap 은
소스코드 매핑으로, on 이후에는 개발환경에서도 소스코드의 위치를 매핑할 수 있습니다.
vite 프로젝트에서 css에는 유사한 속성 devSourcemap 도 있습니다 .
Vite의 CSS 콘텐츠 특수 처리
devSourcemap에 대한 공식 웹사이트의 설명은 매우 간단합니다.
| 구성 이름 | 속성 값 | 의역 |
|---|---|---|
| devSourcemap | 부울 | 기본 거짓 |
몇 가지 간단한 예를 통해 이 속성 값의 의미를 살펴보겠습니다.
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 의 내부 스타일 콘텐츠를 처리 하고 스타일 태그의 형태로 전역적으로 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에서 소스맵을 개발하는 방법
우선, 프로덕션 환경(코드가 패키징된 후)에서 이 구성이 유효하지 않음 을 분명히 하고 싶습니다 .
이를 구성하고 코드를 배포한 다음 스타일 파일을 찾아
프로덕션 모드에서는 모든 스타일이 index[hash 값].css 파일 에 배치되어 있음을 알 수 있습니다 . 따라서 이 구성은 프로덕션 모드에서 유효하지 않습니다.
그런 다음 초대하여 구성하면 기본적으로 활성화되며 프로덕션 모드는 적용되지 않습니다.
물론 좀 더 전문적으로 하고 싶다면 이렇게 구성할 수 있습니다.
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
추천 관련 기사: