devSourcemap

Si utilizamos herramientas de construcción como webpack o vite para desarrollar proyectos, debemos estar familiarizados con la palabra sourcemap . sourcemap es
el mapeo del código fuente.Después de que se activa, la ubicación del código fuente se puede mapear incluso en el entorno de desarrollo.

En el proyecto vite, css también tiene una propiedad similar devSourcemap .

Manejo especial de Vite del contenido css

La explicación del sitio web oficial de devSourcemap es muy simple:

nombre de configuración	valor de atributo	paráfrasis
devSourcemap	booleano	predeterminado falso

Echemos un vistazo al significado de este valor de atributo a través de algunos ejemplos simples.

En un proyecto vue basado en vite, solo escribimos algunos estilos simples sin ninguna configuración

// 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>

Abramos el navegador y localicemos el estilo del elemento.

En la figura anterior, podemos ver que vite procesó el contenido de estilo interno de app.vue y lo inyectó en html globalmente en forma de etiquetas de estilo . Por lo tanto, cuando ubicamos el estilo .wrap del elemento div a través del navegador, señalamos la etiqueta de estilo dentro de la etiqueta de encabezado.

Sin embargo, durante el proceso de desarrollo, preferimos poder ubicar directamente el estilo en el que se encuentra el archivo a través del nombre de la clase, lo que es más propicio para nuestra depuración.

En este momento, el atributo devSourcemap resulta útil.

El propósito de devSourcemap

Configuramos devSourcemap a verdadero en vite.congfig.js

Nota: devSourcemap es un atributo del elemento de configuración css

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

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

Luego, abrimos el navegador y ubicamos el contenido de este estilo para ver

Obviamente, esta vez localizamos directamente el código fuente de App.vue, que es muy cómodo y necesario para el desarrollo.

Cómo devSourcemap en Vite

En primer lugar, queremos dejar claro que esta configuración no es válida en el entorno de producción (después de empaquetar el código) .

Configuremos esto, implementemos el código y luego ubiquemos el archivo de estilo para ver

Se puede encontrar que en el modo de producción, todos los estilos se colocan en el archivo index[hash value].css . Por lo tanto, esta configuración no es válida en el modo de producción.

Luego, cuando lo configuremos en vite, estará habilitado por defecto, y el modo de producción no tendrá efecto de todos modos.

Eso sí, si quieres ser más profesional, puedes configurarlo así

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'
  },
});

Algunos estudiantes pueden pensar que el método de configuración aquí es bastante extraño, no importa, consulte este artículo:

https://juejin.cn/post/7172009616967942175

Artículos relacionados recomendados:

Cómo usar el mapeo de archivos fuente CSS en Vite

devSourcemap

Manejo especial de Vite del contenido css

El propósito de devSourcemap

Cómo devSourcemap en Vite

Supongo que te gusta