devSourcemap

Se usarmos ferramentas de construção como webpack ou vite para desenvolver projetos, devemos estar familiarizados com a palavra sourcemap . sourcemap é
o mapeamento do código-fonte.Após ativado, a localização do código-fonte pode ser mapeada até mesmo no ambiente de desenvolvimento.

No projeto vite, css também possui uma propriedade semelhante devSourcemap .

Manipulação especial do Vite para conteúdo css

A explicação do site oficial do devSourcemap é muito simples:

nome da configuração	Valor do atributo	paráfrase
devSourcemap	boleano	padrão falso

Vamos dar uma olhada no significado desse valor de atributo por meio de alguns exemplos simples.

Em um projeto vue baseado em vite, apenas escrevemos alguns estilos simples sem qualquer configuração

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

Vamos abrir o navegador e localizar o estilo do elemento

Na figura acima, podemos ver que o vite processou o conteúdo de estilo interno do app.vue e o injetou no html globalmente na forma de tags de estilo . Portanto, quando localizamos o estilo .wrap do elemento div através do navegador, apontamos para a tag style dentro da tag head.

No entanto, durante o processo de desenvolvimento, preferimos poder localizar diretamente o estilo em qual arquivo através do nome da classe, que é mais propício para nossa depuração.

Neste momento, o atributo devSourcemap é útil.

O objetivo do devSourcemap

Configuramos devSourcemap como true em vite.congfig.js

Nota: devSourcemap é um atributo do item de configuração css

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

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

Em seguida, abrimos o navegador e localizamos o conteúdo deste estilo para ver

Obviamente, desta vez localizamos diretamente o código-fonte do App.vue, que é muito confortável e necessário para o desenvolvimento!

Como devSourcemap no Vite

Primeiramente, queremos deixar claro que esta configuração é inválida no ambiente de produção (após o empacotamento do código) .

Vamos configurar isso, implantar o código e localizar o arquivo de estilo para ver

Pode-se descobrir que no modo de produção, todos os estilos são colocados no arquivo index[hash value].css . Portanto, esta configuração é inválida no modo de produção.

Então, quando o configurarmos no vite, ele será ativado por padrão e o modo de produção não terá efeito de qualquer maneira.

Claro, se você quiser ser mais profissional, pode configurá-lo assim

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

Alguns alunos podem pensar que o método de configuração aqui é bastante estranho, não importa, consulte este artigo:

https://juejin.cn/post/7172009616967942175

Artigos relacionados recomendados:

Como usar o mapeamento de arquivo de origem CSS no Vite

devSourcemap

Manipulação especial do Vite para conteúdo css

O objetivo do devSourcemap

Como devSourcemap no Vite

Acho que você gosta